python vuedraggable_vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)

效果图：

--------------------------------------------------------------------------------

首先需要安装vuedraggable依赖包：

npm install vuedraggable --save

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

npm install sortablejs --save

复制vue html代码到项目：

常用

@start="start22"

@end="end22"

class="dragArea11"

style="height: 100px">

{ {element.name}}

所有

@end="end"

class="dragArea">

:class="{undraggable : element.flag}"

class="list-complete-item">

{ {element.name}}

下面是vue js代码(包含css样式)：

import draggable from 'vuedraggable'

export default {

name: 'DndList',

components: { draggable },

watch: {

},

data () {

return {

falgs: 'article',