一、拖放和释放
HT ML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的 文件管理器 拖动DOM的操作。
拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为 Drag over事件定义一个 事件处理 程序。
触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个 <div> 元素 为例 展示了这些工作是如何完成的：
<div id="drop_zone" ondrop="dropHandler(event);"> <p>Drag one or more files to this Drop Zone .. .</p> </div>
一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。需要定义一个 ondragover 事件处理函数：
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> <p>Drag one or more files to this Drop Zone ...</p> </div>
二、可拖拽属性
在一个网页中，有 几种 特定情况会使用默认拖拽行为，其中包括拖拽选中文本、拖拽图像和拖拽链接。当一个图像或链接被拖拽时，图像或链接的 URL 被设定为拖拽数据。对于其他元素，只当它们是被选中的一部分时，才会触发默认拖拽行为。如果想看看拖拽实际的样子，可以选中网页的一部分，然后按住鼠标，拖动选中的目标。选中的部分根据系统的不同会有不同的渲染效果，并在拖拽时跟随着 鼠标指针 。然而，这只是默认拖拽行为的效果，此时没有监听程序 调整 拖拽数据。
在 HTML 中，除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。
要使其他的 HTML 元素可拖拽，必须做三件事：
将想要拖拽的元素的 draggable 属性设置成 draggable="true"。 为 [dragstart]事件添加一个监听程序。 在上一步定义的监听程序中 设置拖拽数据。属性 draggable 设置为 "true"，所以这个元素变成可拖拽的。如果该属性被省略或被设置为 "false"，则该元素将不可拖拽，此时拖拽只会选中文本。
draggable 属性可在任意元素上设置，包括图像和链接。然而，对于后两者，该属性的默认值是 true，所以你只会在禁用这二者的拖拽时使用到 draggable 属性，将其设置为 false。
三、Data transfer
DataTransfer 对象用于保存拖动并放下（drag and drop） 过程中 的数据。它可以保存一项或多项数据，这些数据项可以是一种 或者 多种数据类型。
3.1 属性
dro PE ffect | 获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。 |
effect Allowed | 提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or unin IT ialized 之一。 |
files | 包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为 空列表 。 |
items | 提供一个包含所有拖动数据列表的 DataTransferItemList 对象。 |
types | 一个提供 dragstart 事件中设置的格式的 strings 数组。 |
3.2 方法
clearData() | 删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。 |
getData() | 检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串。 |
setData() | 设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。 |
setDragImage() | 用于设置自定义的拖动图像。 |
四、DataTransferItem
DataTransferItem 描述了一个拖拽项。在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem 。
4.1 属性
kind | 拖拽项的种类，string 或是 file。 |
type | 拖拽项的类型，一般是一个 MIME 类型。 |
4.2 方法
getAsFile() | 返回一个关联拖拽项的 File 对象（当拖拽项不是一个文件时返回 null）。 |
getAsString() | 使用拖拽项的字符串作为参数执行指定回调函数。 |
webkit GetAsEntry() | 返回一个基于 File Sys temEntry 的对象来表示文件系统中选中的项目。通常是返回一个FileSystemFileEntry 或是 File systemd irectoryEntry 对象。 |
五、DataTransferItemList
5.1 属性
length | 无符号长 整型 ：列表中拖动项的数量。 |
5.2 方法
add() | 向拖动项列表中添加新项 (File对象或string)，该方法返回一个 DataTransferItem 对象。 |
remove() | 根据索引删除拖动项列表中的对象。 |
clear() | 清空拖动项列表。 |
DataTransferItem() | 取值方法：返回给定 下标 的DataTransferItem对象。 |
六、Event事件
drag | 在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。 |
dragend | 在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。 |
dragenter | 在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。目标对象是用户直接选择的范围（由用户直接指示作为放置目标的元素），或者 <body> 元素。 |
dragleave | 在拖动的元素或选中的文本离开一个有效的放置目标时被触发。 |
dragover | 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发。该事件在放置目标上触发。 |
dragstart | 在用户 开始 拖动元素或被选择的文本 时调 用。 |
drop | 在元素或选中的文本被放置在有效的放置目标上时被触发。 |
七、实例
在通过上述的 了解 ，咱们已经 知道 JS拖拽功能的相关接口，这次我们将通过它们来实现元素的位置调换。如下图，我们将时间从乱序中，移动为 正常 排序。
7.1 html代码
由于drag Event绑定在el -t ag上无效，这里外面包裹层div来实现元素的拖拽 事件绑定 。
<div @dragstart="dragstartEvent($event, index)"
@dragover="dragove rev ent($event, index)"
@drop="dragdropEvent($event, index)"
v-for="(tag, index) in recordList"
:key="tag"
style="dis play : inline-block;">
<el-tag closable
@close="removeTagEvent(tag)"
type="info"
draggable>{{tag}}</el-tag>
</div>
7.2 JS代码
这里需要注意的是，drop事件想要被触发，必须绑定dragover事件，并在dragover事件中执行e. PR eventDefault()。未绑定dragover事件，则drop事件将不会被触发。
在第三节，已 讲解 了dataTransfer属性和方法，我们可能通过它进行数据的传递。如dragstartEvent()函数中将被拖拽元素的索引，通过setData存储到起来，在dragdropEvent()事件执行后，再通过getData获取被拖拽元素的索引。
在将被拖拽元素插入到新位置前，我们需要通过 splice 将原位置的删除，再通过splice将其插入新的位置，代码如下：
<script>
export default {
data(){
return {
recordList: ['08:30', '22:45', '09:00', '23:30', '09:00', '04:30']
}
},
methods: {
/**
* 开始拖拉元素的值 索引位置
*/
dragstartEvent(e, i){
e.dataTransfer.setData('start', i);
},
/**
* 元素经过某元素位置时，执行事件
*/
dragoverEvent(e, i){
e.preventDefault();
},
/**
* 放开元素时执行
*/
dragdropEvent(e, i){
let startIndex = e.dataTransfer.getData('start');
if(startIndex||0 == startIndex){
//记录被拖动元素内容
let startVal = this.recordList[startIndex];
//删除被拖动位置元素
this.recordList.splice(startIndex, 1);
//将被拖动元素插入数组 指定位置
this.recordList.splice(i, 0, startVal);
//清除记录数据
e.dataTransfer.clearData();
}
},
}
}
</script>
通过这个小案例，在Vue中将元素变成可拖拽的，实现了以拖拽方式更换了元素的位置， 希望对大家有所帮助 。
到此这篇关于Vue实现DOM元素拖放 互换 位置示例的 文章 就介绍到这了,更多相关Vue DOM元素拖放互换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: Vue获取DOM元素样式和样式更改示例 vue动态生成dom并且自动绑定事件 vue获取DOM元素并设置属性的两种实现方法 在vue中获取dom元素内容的方法 vue操作dom元素的3种方法示例 利用vue.js插入dom节点的方法 vue如何判断dom的class 解决vue页面DOM操作不生效的问题
总结
以上是 为你收集整理的 Vue实现DOM元素拖放互换位置示例 全部内容，希望文章能够帮你解决 Vue实现DOM元素拖放互换位置示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue实现DOM元素拖放互换位置示例的详细内容...