基本信息
文件名称:Vue实现DOM元素拖放互换位置示例.docx
文件大小:19.52 KB
总页数:8 页
更新时间:2025-05-22
总字数:约4.68千字
文档摘要

Vue实现DOM元素拖放互换位置示例

目录一、拖放和释放二、可拖拽属性三、DataTransfer3.1属性3.2方法四、DataTransferItem4.1属性4.2方法五、DataTransferItemList六、Event事件七、实例7.1html代码7.2JS代码

一、拖放和释放

HTML拖放接口使得web应用能够在网页中拖放文件。这里将介绍了web应用如何接受从底层平台的文件管理器拖动DOM的操作。

拖放的主要步骤是为drop事件定义一个释放区(释放文件的目标元素)和为dragover事件定义一个事件处理程序。

触发drop事件的目标元素需要一个ondrop事件处理函数。下面这一段代码以一个div元素为例展示了这些工作是如何完成的:

divid=drop_zoneondrop=dropHandler(event);

pDragoneormorefilestothisDropZone.../p

/div

一般来说,在实际应用中需要定义一个dragover事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。需要定义一个ondragover事件处理函数:

divid=drop_zoneondrop=dropHandler(event);ondragover=dragOverHandler(event);

pDragoneormorefilestothisDropZone.../p

/div

二、可拖拽属性

在一个网页中,有几种特定情况会使用默认拖拽行为,其中包括拖拽选中文本、拖拽图像和拖拽链接。当一个图像或链接被拖拽时,图像或链接的URL被设定为拖拽数据。对于其他元素,只当它们是被选中的一部分时,才会触发默认拖拽行为。如果想看看拖拽实际的样子,可以选中网页的一部分,然后按住鼠标,拖动选中的目标。选中的部分根据系统的不同会有不同的渲染效果,并在拖拽时跟随着鼠标指针。然而,这只是默认拖拽行为的效果,此时没有监听程序调整拖拽数据。

在HTML中,除了图像、链接和选择的文本默认的可拖拽行为之外,其他元素在默认情况下是不可拖拽的。

要使其他的HTML元素可拖拽,必须做三件事:

将想要拖拽的元素的draggable属性设置成draggable=true。为[dragstart]事件添加一个监听程序。在上一步定义的监听程序中设置拖拽数据。

属性draggable设置为true,所以这个元素变成可拖拽的。如果该属性被省略或被设置为false,则该元素将不可拖拽,此时拖拽只会选中文本。

draggable属性可在任意元素上设置,包括图像和链接。然而,对于后两者,该属性的默认值是true,所以你只会在禁用这二者的拖拽时使用到draggable属性,将其设置为false。

三、DataTransfer

DataTransfer对象用于保存拖动并放下(draganddrop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。

3.1属性

dropEffect

获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为none,copy,link或move。

effectAllowed

提供所有可用的操作类型。必须是none,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized之一。

files

包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件,则此属性为空列表。

items

提供一个包含所有拖动数据列表的DataTransferItemList对象。

types

一个提供dragstart事件中设置的格式的strings数组。

3.2方法

clearData()

删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定,则删除与所有类型关联的数据。如果指定类型的数据不存在,或者datatransfer中不包含任何数据,则该方法不会产生任何效果。

getData()

检索给定类型的数据,如果该类型的数据不存在或datatransfer不包含数据,则返回空字符串。

setData()

设置给定类型的数据。如果该类型的数据不存在,则将其添加到末