[JavaScript知识库]vue3 拖拽组件drag-drop

做项目的时候遇到了一个需求，拖拽按钮到指定位置，添加一个输入框。

基本思路：

1. 基本按钮添加
2. 指定位置里面写好需要的输入框，只不过用v-show隐藏起来，拖拽触发条件显示输入框，同时隐藏按钮
3. 给按钮加可拖动标签，给指定位置加可放置标签
4. 拖动按钮到指定位置，改变显示条件，输入框显示出来，按钮消失

首先安装插件 vue-drag-drop

cnpm install --save vue-drag-drop

然后引入插件

import VueDragDrop from 'vue-drag-drop'

Vue.use(VueDragDrop)

组件使用方法：

// drag标签表示这个元素可以拖动
<drag
  v-show="whereUtil === false"
  :transfer-data="{ whereDrag }"
  style="display:inline;margin-right:15px"
>
  <el-button id="where" type="primary" plain>WHERE</el-button>
</drag>
// drop标签表示 可拖动的元素允许被拖到这个位置
<drop @drop="handleDrop">
  <div
    id="queryArea"
    class="input"
    draggable
    style="width: 90%;"
  >
  	<el-col v-show="whereUtil === true">
	  	<span>WHERE </span>
	    <el-input
	      v-model="whereValue"
	      style="width:70%"
	      clearable
	    />
	</el-col>
  </div>
</drop>



// 数据
whereValue: '',
whereDrag: '', // where拖動
whereUtil: false



// js
handleDrop(data, event) {
// data获取到拖动元素的数据，key为:transfer-data中的值
  const value = Object.keys(data).join()
  if (value === 'whereDrag') {
  	this.whereUtil = true
  }
}

这就实现了拖拽组件的使用

效果图

拖拽前的效果

拖拽途中效果

拖拽后的效果

VueDragDrop的官方demo
带代码的demo科学上网