如何使用原生JS的拖拽事件，实现一对一在Vue中

在vue当中可以使用插件来实现拖拽，我发表的是在Vue中用原生的JS来实现

 需要拖拽页面

1.首先打开dragstart这个属性 ，能让浏览器允许你拖动

2.设置一个监听事件 @dragstart="($event) => handleDragStart($event, child.label)"

1. 事件绑定 (@dragstart):

   • @dragstart是Vue.js的事件监听器语法，它用于绑定HTML元素上的dragstart事件。
   • 当用户开始拖动元素时，dragstart事件会被触发。

2. 箭头函数 (($event) => handleDragStart($event, child.label)):

   • 这里使用了一个箭头函数来定义事件处理器。
   • 箭头函数接受一个参数$event，它是原生的JavaScript事件对象。
   • 箭头函数内部调用了handleDragStart方法，并传入了两个参数：$event和child.label。
   • child.label是从v-for循环中获取的当前迭代项的属性值，代表了按钮上的文本

3. v-for循环:

   • v-for="child in item.children"表示该按钮是通过遍历item.children数组生成的。每次迭代都会创建一个新的<el-button>组件，并为其分配一个唯一的key属性，即child.id。（这个是传递你接受组件所需要的数据）

   • 

到这你需要拖拽的页面就写好了。接下来就是接受数据的页面。

 接受参数页面

1.打开接受拖拽事件的属性

dragover说明

1. 事件绑定 (@dragover):

   • @dragover 是 Vue.js 中用来绑定原生 JavaScript dragover 事件的语法。
   • 当一个元素处于被拖拽的项目之上时，dragover 事件会被触发。

2. 事件处理器 (dragover):

   • dragover 是一个方法名，表示当 dragover 事件发生时要执行的方法。
   • 这个方法应该在 Vue 实例的 methods 对象中定义。

3. 目的:

   • 通常，dragover 事件用于阻止默认行为（如选中文本）并允许拖放操作继续。
   • 如果你不阻止默认行为，浏览器可能会阻止拖放操作，或者执行一些不期望的操作。

 @drop="($event) => drop($event, grandchild)"说明 

1. 事件绑定 (@drop):

   • @drop 是 Vue.js 中用来绑定原生 JavaScript drop 事件的语法。
   • 当用户将一个可拖动元素拖到当前元素并释放时，drop 事件会被触发。

2. 箭头函数 (($event) => drop($event, grandchild)):

   • 这里使用了一个箭头函数来定义事件处理器。
   • 箭头函数接受一个参数$event，它是原生的JavaScript事件对象。
   • 箭头函数内部调用了drop方法，并传入了两个参数：$event和grandchild。

1. 3.目的:

   • drop 方法会在元素被拖动到目标位置并释放时被调用。
   • 通常，drop 方法会处理与拖放操作相关的逻辑，比如更新模型、移动元素等。

 2.设置相关属性 

3.做出相应的事件

这样就完成了！