利用插件draggable简单实现元素在可视范围内任意拖拽：

1. 安装插件

npm i draggable

2. 元素

<div id="id"></div>

3. 拖拽代码：

mounted(){
	let ele = document.getElementById("id");
    let limit = document.getElementById("map");
    const options = {
      setCursor: true,
      limit: limit,
      onDrag: this.onDragFactory,
    };
    new Draggable(ele, options);
}
methods:{
	onDragFactory(element) {
	// 拖拽过程中调用
    console.log((element);
}

注：如果是拖拽table或者card等不是div包裹元素，可能会出现初始样式显示不正确及拖拽过程动画卡顿。可在需要拖拽的元素外添加一层div，使拖拽的元素是div元素即可。如：

<div class="card_table" id="card_table">
      <el-card v-show="cardShow">
        <div slot="header" class="clearfix">
          <span>数据2</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="cardShow = !cardShow"
            >X</el-button
          >
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
</div>

mounted(){
	let ele = document.getElementById("card_table");
    let limit = document.getElementById("map");
    const options = {
      setCursor: true,
      limit: limit,
      onDrag: this.onDragFactory,
    };
    new Draggable(ele, options);
}
methods:{
	onDragFactory(element) {
	// 拖拽过程中调用
      console.log((element);
}

源码地址：draggable