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 属性

3.2 方法

四、DataTransferItem

DataTransferItem 描述了一个拖拽项。在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem 。

4.1 属性

4.2 方法

五、DataTransferItemList

5.1 属性

5.2 方法

六、Event事件

七、实例

在通过上述的了解，咱们已经知道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元素拖放互换内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！