vue拖拽组件使用方法详解

前言

个人计算机端开发需要拖拽组件完成列表的顺序交换，一般移动端的用户界面组件会包含，但是我在用的接口并没有此功能的组件，于是手写一个，实现起来很简单。效果图如下：

可以拖拽完成新排序，点击某一项可以触发相关事件。

关于拖拽拖放

拖放（拖动和下降)是HTML5标准的组成部分。

拖拽对象

数据传输对象，只能在拖放事件的事件处理程序中访问。重要属性：

允许的效果（无|复制|复制链接|复制移动|链接、链接移动|移动|全部|未初始化):设置或返回被拖动元素允许发生的拖动行为dropEffect(无|复制|链接|移动):设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在允许的效果属性设置的多种拖放行为之内，拖放操作将会失败数据传输。getData(格式):获取数据传输对象中设置格式格式的数据。其中格式代表数据格式，数据代表数据。拖拽属性

可拖动的属性规定元素是否可拖动。

拖拽事件

ondragstart:在拖动开始时执行，返回被拖动元素ondragover:返回在何处放置被拖动的数据默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式ondragenter:在被拖动的元素进入到放置目标时执行软骨：在被拖动的元素离开放置目标时执行软骨发育不良：皆指鼠标松开被拖动对象的事件，但是返回的分别为被拖动对象和被拖动元素悬挂的那个元素源码：

template div class=' transition-container ' div class=' item ' v-for='(item，index)items ' : key=' index ' draggable=' true ' @拖动start=' handledrag start($ event，item)' @拖动结束。protect=' handledrag over($ event，item)' @ drag enter=' handledrag enter($ event，item)' @ drag end=' handledrag end($ event，item)' @ click=' chooseNav(item)' p class=' trans-BTN ' span v-if=' @ click=' delete item(项，索引)'删除/I-button/span/p/div/div/template脚本导入./index。“少”；导出默认{ name: 'transition '，props: { dataSource: Array，btn: Boolean，}，data() { return { items: []，dragging: null，}；}，观看： {数据源(val){ this。items=val},拖动如果这个。数据源。包括(val)){这个。拖动=val} else { this.dragging=null } }，}，methods: { handleDragStart(e，item){ this。拖动=项目；}，handleDragEnd(){ this。draging=null这个$emit('hasChanged '，这。物品)；}, //首先把差异变成可以放置的元素，即重写拖动输入/拖动手柄拖动到(e)上。Dropeffect=' move//e . DataTransfer。Dropeffect=' move//在拖动进入中针对放置目标来设置！}，handleDragEnter，item){ if(this。draging){ e . datatransfer。允许的效果=“移动”；//为需要移动的元素设置开始拖动事件if(item===this。拖动){返回；} const newItems=[.这个。项目]；控制台。日志(新项目)；const src=NewItems。indexof(此。拖拉)；const dst=NewItems。indexof(项)；newItems.splice(dst，0，newItems.splice(src，1))；this.items=newItems} }，选择导航(价值){这个.$emit('selectItem '，val)；}，deleteItem(项，索引){ this .$emit('deleteItem '，Item，index)；},编辑器（项，索引){这个.$emit('editorItem '，Item，index)；}, },};/script基本功能就完成啦

参考文章

W3school——HTML 5拖放div拖放交换位置(vue)如果简单的功能不满足，推荐这个写轮

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