vue拖拽组件vuedraggable API选项实现盒子之间相互拖拽排序

某视频剪辑软件拖拽克隆克隆组件可拖动的实现盒子之间相互拖拽排序克隆（网上资源整理的文档)

效果图：

-

首先需要安装vuedraggable依赖包：

新公共管理安装vuedraggable -保存

因为拖拽组件依赖可排序的js，如果项目没有安装可排序的js，可能需要安装一下

新公共管理安装可排序的js -保存

复制vue html代码到项目：

模板H3常用/h3可拖动： list=' list 1 ' : options=' { group : ' article '，disable : disable } ' @ start=' start 22 ' @ end=' end 22 ' class=' dragare 11 ' style=' height : 100px ' div v-for='(元素，索引)在list 1 ' : key='元素。id ' class=' list-complete-item ' div class=' list-complete height : 10px背景-color : # bfbfbf '/div class=' dndList-list ' H3所有/h3可拖动： list=' list 2 ' : options=' { group : { name : falgs，pull:'clone'}，filter: ' .' undraggable '，sort : false } ' @ end=' end ' class='拖动区域' div-for=' list 2 '中的元素：键='元素。id ' : class=' {不可删除的：元素。flag } ' class=' list-complete-item ' div class=' list-complete-item-handle 2 ' { element。名称} }/div/可拖动/div/模板下面是vue js代码（包含钢性铸铁样式):

脚本导入可从“vuedraggable”导出默认的{ name: ' DndList，components: { draggable }，watch: { }，data(){ return { falgs : ' article '，disabled: false，list1: []，list 23:[{ id 3: 1，name: 1 }，{ id 3: 2，name 333: }，{ id 33333: $ set(this . list 2[thisfalgs=' 222222 ' }，end 22(ev){ this。falgs=' article ' }，handleDel (Index，id) { this.list1.splice(index，1)让q=this.list2.find((value，Index，arr)={ return。id===id })这个.$set(q，“flag”，false) } }}/scriptstyle rel='样式表/scss' lang='scss '作用域列表-完整项目{ cursor:指针；相对位置：font-size : 14pxpadding: 5px 12pxdisplay:内联块；右边距： 20px宽度： 50px高度： 50pxborder: 1px固体# bfcbd9transition:全1;} .列表-完整-项目。可排序-选择{背景： # 4ab 7bd} .列表-完整-项目。可排序-幽灵{背景： # 30B 08F} .不可拖动{背景色：红色；} .列表-完成-输入，列表-完成-保持活动状态{ opa city 3360 0；}/样式项目中选择配置项的说明：

:选项=' { group : { name : falgs，pull:'clone'}，filter: ' .'不可删除，sort: false}”

1、要实现两个组件之间的拖拽，需要两个组件的选择的组名称保持一致！组："111"或者group:{name:'111'}，写法都可以2、群体里面的pull: "克隆"表示克隆拖拽的项，这样配置之后，会保留被拖拽的项3、滤波器：'。'不可删除',不可提取在本案例中，实际上是取得超文本标记语言的动态样式不可抓取的，用来单独配置某个组件是否可以重复被拖拽，可以用逗号隔开配置多个在本案例中，拖拽一次，就被禁止再次拖拽4、排序，值为真实的或者假的，是否允许拖拽排序5、禁用，值为真实的或者假的，是否允许其他项目被拖拽到本组件中，假的同时也禁止了本组件的拖拽功能。

-

以下是配置项API选项和事件描述的全面描述：

组参数描述：

字符串：命名。个人建议使用元素id。目的是设置拖放的容器，然后在放入数组的设置中引入；对象：{name，pull，put} name:与string相同的方法。pull:pull用于定义要从此列表容器移出的设置。列表容器中的列表单元可以用true/false/“clone”/函数true:移出；True:列表容器中的列表单元无法移出；“克隆”:列表单元被移出，元素的副本被移动；功能：用于判断拉的功能，可以进行复杂的逻辑，并在功能中返回false/true来判断是否移出；Put:put用于定义将列表单元放入此列表容器的设置。True/false/['foo '，' bar']/function true :列表容器可以放置来自其他列表容器的列表单元。真实：与真实相反；['foo '，' bar']:这可以是字符串或字符串数组，表示在组配置项中定义的名称值；功能：用于判断put的功能，可以进行复杂的逻辑，并在功能中返回false/true来判断是否放入；

更多参数描述：

Group:' name '，//或{name: ' . '，pull: [true，false，clone]，put: [true，false，array]} sort: boolean定义列表单元格是否可以在列表容器中拖动和排序。延迟：数字定义鼠标选择列表单元开始拖动的延迟时间；禁用：布尔值定义此可排序对象是否可用。如果为真，则不能拖动可排序对象进行排序；如果为false，则可以排序，这相当于一个开关。动画：数字单位：ms，定义动画排序的时间；handle:handle:选择器格式是一串简单的css选择器，这样列表单元中符合选择器的元素就变成了拖动手柄。只有按住拖动手柄，才能拖动列表单元；filter:selector的格式是一串简单的css选择器，它定义了哪些列表单元不能拖放。可以设置为多个选择器，用“，”隔开；可拖动：选择器格式是一串简单的css选择器，它定义了可以拖放哪些列表单元。ghostclass:选择器格式是一串简单的css选择器。拖动列表单元时，将生成一个副本作为阴影单元，以模拟被拖动单元的排序。这个配置项就是给这个阴影单元添加一个类，我们可以这样编辑阴影元素的样式。chosenClass:选择器格式是一串简单的css选择器，和一个类；将被添加到列表单元中；强制回退：如果Boolean设置为true，将不使用原生html5拖放，可以修改拖放中某些元素的样式。fallbackClass:string当forceFallback设置为true时，拖放过程中鼠标附件单元的样式；滚动：布尔值默认为真。当排序后的容器是可滚动区域时，拖放会导致该区域滚动

事件：

onChoose:函数列表单元格选定的回调函数onStart:函数列表单元格回调函数onEnd:函数列表单元格回调函数onAdd:函数列表单元格回调函数添加到此列表容器onUpdate:函数列表单元格在列表中回调函数onRemove:函数回调函数过滤器：列表元素移动到另一个列表容器的函数尝试选择回调函数onRemove:函数回调函数onClone:在一个列表容器中移动列表元素时或创建列表元素副本时在多个列表容器中移动列表元素时的函数回调函数

事件对象：

每个函数中的事件对象略有不同。您可以通过输出对象查看对象的属性。这里有几个：

to:HTMLElement -移动到列表容器from:HTMLElement -源列表容器项目：HTMLElement -移动的列表单元克隆：HTMLElement-重复的列表单元oldindex:number/undefined-列表容器中的原始序列号new index:number/undefined-列表容器中的新序列号

-

方法

Option (name [，value])获取或设置项参数，使用方法类似于jQuery。没有第二个参数来获取选项中第一个参数对应的值。如果有第二个参数，它将被再次分配给第一个参数对应的值。closest不明白toArray()序列化可排序列表单元的数据-id(可由配置项中的dataIdAttr修改)放入数组中，并在此数组中返回sort()通过自定义列表单元的数据-id数组对列表单元进行排序save()destroy()

摘要

以上是边肖推出的vue拖放组件vuedraggable API选项，实现了盒子之间的拖放排序。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！