vue实现div拖拽,vue3 拖拽

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现拖拽交换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现拖拽交换位置的具体代码，供大家参考，具体内容如下

　　模板

　　div class=root

　　transition-group tag= div class= container

　　差异

　　class=item

　　:class= 项“我”

　　v-for=(item，i) in items

　　:key=item.key

　　:style= { background-color :item。颜色，边框： 1px纯色 }

　　draggable=true

　　@ dragstart= handleDragStart($ event，item)

　　@ dragover。prevent= handleDragOver($ event，item)

　　@ dragent= handledragent($ event，item)

　　@dragend=handleDragEnd($event，item)

　　div{{ item }}/div

　　/div

　　/过渡-组

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称："工具栏",

　　data() {

　　返回{

　　项目：[

　　{ key: 1，color: #3883a0 }，

　　{ key: 2，color: #4883a0 }，

　　{ key: 3，color: #5883a0 }，

　　{ key: 4，color: #6883a0 }，

　　{ key: 5，color: #7883a0 }，

　　{ key: 6，color: #8883a0 }，

　　{ key: 7，color: #9883a0 }，

　　],

　　结尾：null，

　　拖动：空，

　　};

　　},

　　方法：{

　　handleDragStart(e，item) {

　　this.dragging=item

　　},

　　handleDragEnd(e，item) {

　　如果(这个。结局。key===这个。画画。关键){

　　返回；

　　}

　　let newItems=[.这个。项目]；

　　const src=新项目。的索引。绘图)；

　　const dst=新项目。的索引。结局)；

　　新项目。拼接(src，1，newItems.splice(dst，1，new items[src])；

　　控制台。日志(新项目)；

　　this.items=newItems

　　这个. nextTick(()={

　　this.dragging=null

　　this.ending=null

　　});

　　},

　　手柄拖拽工具(五)

　　//首先把差异变成可以放置的元素，即重写拖拽输入/拖拽

　　//在拖动进入中针对放置目标来设置

　　e。数据传输。掉落效果=移动；

　　},

　　handleDragEnter，item) {

　　//为需要移动的元素设置开始拖动事件

　　e。数据传输。允许的效果= move

　　this.ending=item

　　},

　　},

　　};

　　/脚本

　　style lang=less 范围。容器{

　　显示器：flex

　　柔性包装：缠绕；

　　}。项目{

　　宽度：200像素

　　高度：200像素

　　边距：10px

　　颜色：# fff

　　过渡：全线性0.3秒

　　}。项目0 {

　　宽度：400像素

　　}

　　/风格

　　效果

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。