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

目录
  • 一、拖放和释放
  • 二、可拖拽属性
  • 三、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元素拖放互换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • 利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

  • 解决vue页面DOM操作不生效的问题

    现象: 使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下: 下面是出错部分: 在新增节点后移入新增节点附近(图中是移入一级2),功能按钮的显示位置出现偏移 原因查找: 经过调试发现是在新增节点后,执行DOM操作获取节点时,取到的仍是之前的结构,新增的节点并未获取到. 原因分析: 猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取. 解决方法: 使用Vue.nextTick,看下官方材料: '在下次

  • vue操作dom元素的3种方法示例

    1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • vue如何判断dom的class

    vue点击给dom添加class然后获取含有class的dom <div class="chose-ck" v-for="(item,index2) in colors" :key="index2" ref="chosebox"> <p>{{item.name}}</p> <dt v-for="(item2,index) in item.childsCurGoods"

  • Vue获取DOM元素样式和样式更改示例

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>

  • vue实现div拖拽互换位置

    本文实例为大家分享了vue实现div拖拽互换位置的具体代码,供大家参考,具体内容如下 template模板 <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.c

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • Vue获取页面元素的相对位置的方法示例

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题 发现问题 当我滚动到元素的位置时候,我想把元素固定在头部 // html 结构 <div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" re

  • JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

    本文实例讲述了JavaScript求一个数组中重复出现次数最多的元素及其下标位置.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组重复次数</title> </head> <body> <script language="Jav

  • JavaScript DOM元素尺寸和位置

    一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box');    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属性的CSS样式中

  • JavaScript遍历DOM元素的常见方式示例

    本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素

随机推荐

其他