前端拖拽功能-学习笔记

#前端拖拽

1. 设置拖拽元素的属性以及绑定拖拽开始的事件，如下：

<div
    v-for="(item, index) in zjList"
    :key="index"
    draggable="true"
    @dragstart="dragStart($event, item.val)"
>
</div>

其中：draggable="true"，设置该元素可拖拽；

@dragstart="dragStart($event, item.val)",设置元素开始拖拽时绑定的函数；

dragStart函数如下：

dragStart(event, type) {
     event.preventDefault && event.preventDefault();
     event.dataTransfer.setData('type', type);
},

event.dataTransfer.setData('type', type);用来传递拖拽时的传参，即在drop监听函数中可获取该参数信息；

2. 拖拽目标元素设置

<div
   id="leftItem1"
   class="boxItem"
   @drop.prevent="drop($event)" // 拖拽目标元素接收拖拽结束后的监听函数
   @dragover.prevent="" // 用于阻止浏览器默认事件，否则拖动到该要素位置时，鼠标会出现禁止图标样式
/>

其中@drop函数用来监听元素拖动到本位置处后的事件，具体函数如下：

drop(event) {
      // 获取数据类型
      console.log(event.currentTarget.id); // 获取拖拽目标元素的id
      const type = event.dataTransfer.getData('type');// 获取拖拽源要素传递过来的参数数据
},

用户可根据源数据传递过来的参数进行进一步的业务操作