HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能。
一、拖拽事件
1、drag:当拖动元素或选中的文本时触发。
2、dragend:当拖拽操作结束时触发
3、dragenter:当拖动元素或选中的文本到一个可释放目标时触发
4、dragexit:当元素变得不再是拖动操作的选中目标时触发
5、dragleave:当拖动元素或选中的文本离开一个可释放目标时触发
6、dragover:当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)
7、dragstart:当用户开始拖动一个元素或选中的文本时触发
8、drop:当元素或选中的文本在可释放目标上被释放时触发
二、拖拽接口
dragEvent:是一个表示拖、放交互的一个DOM event接口,它有一个构造函数和一个dataTransfer属性,dataTransfer 属性是一个DataTransfer 对象。
DataTransfer对象包含了拖拽事件的状态,例如拖动事件的类型(如拷贝 copy
或者移动 move
),拖动的数据(一个或者多个项)和每个拖动项的类型(MIME类型)。 DataTransfer对象也有向拖动数据中添加或删除项目的方法。
三、vue中代码实现
<template> <transition-group tag="div" name="drag" class="box"> <div v-for="(item, index) in list" :key="item" class="item" :draggable="true" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index, list)" > {{ item }} </div> </transition-group> </template> <script> export default { data() { return { list: [1, 2, 3, 4, 5, 6, 7, 8, 9] }; }, methods: { //取消默认行为 allowDrop(e) { e.preventDefault(); }, //开始拖动 dragStart(e, index) { e.dataTransfer.setData("index", index); }, //放置 drop(e, index, data) { this.allowDrop(e); const dragIndex = e.dataTransfer.getData("index"); const temp = data.splice(dragIndex, 1); data.splice(index, 0, temp[0]); } } }; </script> <style scoped> .box { display: flex; justify-content: space-between; flex-wrap: wrap; width: 330px; margin: 0 auto; } .item { width: 100px; height: 100px; border: 1px solid #ccc; margin-bottom: 10px; line-height: 100px; text-align: center; } .drag-move { transition: transform 1s; } </style>