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

Malinda ·

更新时间:2024-11-10

· 992 次阅读

一、拖放和释放

二、可拖拽属性

三、DataTransfer

3.1 属性

3.2 方法

四、DataTransferItem

4.1 属性

4.2 方法

五、DataTransferItemList

六、Event事件

七、实例

7.1 html代码

7.2 JS代码

一、拖放和释放

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 DOM元素拖放互换内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 示例 dom

1024 个赞