Vue实现DOM元素拖放互换位置
一、拖放和释放
HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。
拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。
触发 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。
三、DataTransfer
DataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。
3.1 属性
dropEffect |
获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。 |
effectAllowed |
提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。 |
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() |
使用拖拽项的字符串作为参数执行指定回调函数。 |
webkitGetAsEntry() |
返回一个基于 FileSystemEntry 的对象来表示文件系统中选中的项目。通常是返回一个FileSystemFileEntry 或是 FileSystemDirectoryEntry 对象。 |
五、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-tag上无效,这里外面包裹层div来实现元素的拖拽事件绑定。
<div @dragstart="dragstartEvent($event, index)"@dragover="dragoverEvent($event, index)"@drop="dragdropEvent($event, index)" v-for="(tag, index) in recordList" :key="tag" style="display: inline-block;"><el-tag closable @close="removeTagEvent(tag)" type="info" draggable>{{tag}}</el-tag>
</div>
7.2 JS代码
这里需要注意的是,drop事件想要被触发,必须绑定dragover事件,并在dragover事件中执行e.preventDefault()。未绑定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 拖拽元素到任意位置
vue 拖拽元素到任意位置 使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
- Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加 ...
- Vue 获取DOM元素 ,给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况 给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
- 八.vue获取dom元素
vue获取dom元素 方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二:使用ref,给相应的元 ...
- Vue笔记四:Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
- vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
最新文章
- Spring配置iBatis多个SqlMapConfig.xml
- 计算机视觉开源库OpenCV之照明和色彩空间
- scrapy 安装_安装scrapy时出错
- 《JavaScript面向对象编程指南》——1.7 训练环境设置
- loadrunner 配置远程监控windows服务器系统资源
- 怎样管理计算机制动开关时间,3分钟让你明白按钮启动如何工作的。
- 拼多多年货节上线,“百亿补贴”加码iPhone 12等产品
- 01-windows下python爬取网页上的图片
- 宁夏2021高考成绩查询,宁夏教育考试院:2021年宁夏高考成绩查询入口、查分系统...
- 关于学习Java中常用类的总结
- VS2013安装番茄助手
- 百度离线地图-加载地图(一)
- 更新了pandas后,ix方法不能使用的替代办法
- 农用化学活性成分的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 3d渲染性能测试软件,3D渲染性能测试
- NC65 用户密码重置
- 幸福究竟和哪些因素有关?通过JMP来看全球幸福指数
- 【基础】代码操作Word时,自动更新目录(一)
- 计算机回收站设置大小,电脑回收站无法调整容量的大小怎么办?
- 升级Windows10,安装程序无法正常启动无法初始化工作目录
热门文章
- 手机上的文件夹在电脑上不显示/手机里的视频图片在app中找不到
- 华为23届校招暂停招聘,今年金三银四秒变“降三裁四“?
- 易观千帆:一份职场人士的数据分析实用指南
- [转载]一口月亮_飘云羽逸_新浪博客
- MacOS安装Powerline
- 如何实现自律和提高效率?
- 智慧树python数据分析与数据可视化_知到APP智慧树Python数据分析与数据可视化慕课答案...
- “Unity打包非全屏游戏,运行时仍然全屏” 的问题解决方案
- CorelDRAW: The Official Guide
- HbuilderX打包app,Hbuilder怎么打包app,H5打包成app,H5怎么打包成app