vue拖拽列表功能的实现!

前言:其实拖拽也没这么复杂,严格来说是三个事件! 拖拽事件/拖拽后/拖拽到的位置接收元素

1、被拖拽的元素

      <div  draggable="true"
              @dragstart="dragEnterEvent($event,'传入当前元素的属性')"
              @dragend="dragEnterOver"></div>

2、接收元素

 <div @drop="dropEvent($event,'接收位置的index')"
              @dragover.prevent >

至此即实现了!

 // 拖拽开始 可以把一些参数插入拖拽元素内
    dragEnterEvent(event, item) {
      const exportId = item.id ? item.exportId : item.userId;
      event.dataTransfer.setData("userId", exportId); // 传递userId
      event.dataTransfer.setData("id", item.id); // 传递旧的index
    },
    // 拖拽结束
    dragEnterOver(event) {
      console.log(event.dataTransfer);
      event.dataTransfer.clearData();
    },
    // 这里接收到元素
    dropEvent(event, index) {
      event.preventDefault();
      const userId = event.dataTransfer.getData("userId");
      const id = event.dataTransfer.getData("id");
      }


相关内容

发表评论

验证码:
点击我更换图片

最新评论