vue拖拽组件（vue拖拽draggable）

draggable 属性规定元素是否可拖动。

<p>无拖拽效果</p> <p draggable>draggable 有拖拽效果</p>

拖拽事件

dragstart：开始拖元素触发，作用于拖拽元素dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素dragover：当元素拖动到drop元素上时触发，作用于目标元素drop：当元素放下到drop元素触发，作用于目标元素dragleave ：当元素离开drop元素时触发，作用于目标元素drag：每次元素被拖动时会触发，作用于目标元素dragend：放开拖动元素时触发，作用于目标元素

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

<template> <div> <div id="div1" @dragover.prevent @drop="handleDrop" ></div> <div id="drag1" draggable data-shape="rect" @dragstart="handleDragstart"> 这是一段可移动的段落。请把该段落拖入上面的矩形。 </div> </div> </template> <script> export default { data() { return { msg: "", }; }, methods: { /* 1. 拖动什么 - ondragstart 和 setData() 然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，handleDragstart(event)，它规定了被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值： function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } Text 是一个 DOMstring 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。 */ handleDragstart(event) { event.dataTransfer.setData("Text",event.target.id); event.dataTransfer.setData('dragSource', JSON.stringify({ shape: event.target.getAttribute('data-shape'), })); }, /* 2. 放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法： event.preventDefault() 这里用的是vue，可以这么写 @dragover.prevent */ /* 3. 进行放置 - ondrop 当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，handleDrop(event)： function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } */ handleDrop(event) { let data = event.dataTransfer.getData("Text"); // drag1 event.target.appendChild(document.getElementById(data)); event.preventDefault(); }, }, }; </script> <style scoped> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style>