:move
="onMove"
>
<
transition-group
>
<
div
class
="dragItem"
:id
="item.name"
v-for
="(item,index) in list"
:key
="item.name"
>
<
div
>
索引：{{index}}
</
div
>
<
div
class
="name"
>
姓名:
<
span
>
{{item.name}}
</
span
></
div
>
<
div
>
年龄:{{item.age}}
</
div
>
<
div
>
工作:{{item.job}}
</
div
>
</
div
>
</
transition-group
>
</
draggable
>
</
el-col
>
<
el-col
:span
="12"
class
="col"
>
<
span
>
B列
</
span
>
<
draggable
v-model
="list2"
chosenClass
="chosen"
group
= "name"
animation
="300"
>
<
transition-group
>
<
div
class
="dragItem"
v-for
="(item,index) in list2"
:key
="item.name"
>
<
div
>
索引：{{index}}
</
div
>
<
div
class
="name"
>
姓名:
<
span
>
{{item.name}}
</
span
></
div
>
<
div
>
年龄:{{item.age}}
</
div
>
<
div
>
工作:{{item.job}}
</
div
>
</
div
>
</
transition-group
>
</
draggable
>
</
el-col
>
</
el-row
>
</
div
>
</
template
>
<
script
>
export
default
{
components:{
draggable:()
=>
import(
"
vuedraggable
"
),
data(){
return
{
list:[
{name:
"
tom
"
,age:
18
,job:
"
coding1
"
},
{name:
"
bob
"
,age:
19
,job:
"
coding2
"
},
{name:
"
jery
"
,age:
20
,job:
"
coding3
"
},
{name:
"
jim
"
,age:
21
,job:
"
coding4
"
},
list2:[
{name:
"
tom2
"
,age:
182
,job:
"
coding12
"
},
{name:
"
bob2
"
,age:
192
,job:
"
coding22
"
},
{name:
"
jery2
"
,age:
202
,job:
"
coding32
"
},
{name:
"
jim2
"
,age:
212
,job:
"
coding42
"
},
methods:{
//
禁止拖动到id为1的对象
onMove(e){
console.log(e);
console.log(e.draggedContext.futureIndex);
if
(e.draggedContext.futureIndex
<=
1
)
return
false
;
return
true
;
</
script
>
<
style
lang
="scss"
scoped
>
.col
{
min-height
:
100px
;
border
:
14px solid purple
;
border-radius
:
4px
;
.dragItem
{
.name{
font-weight
:
600
;
span{
color
:
red
;
border:1px solid blue;
border-radius:4px;
padding:4px;
margin-bottom:8px;
</
style
>
上面是实现了分组拖拽，也可以组内拖拽，并且限制了不能拖拽到几号位
一些属性的说明，具体可以插卡安文档，文档精巧，还有例子，查看方便：
group
:group= "name"，相同的组之间可以相互拖拽
:sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay
:delay= "0", 鼠标按下后多久可以拖拽
touchStartThreshold
鼠标移动多少px才能拖动元素
disabled
:disabled= "true",是否启用拖拽组件
animation
拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle
:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter
:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable
:draggable=".item" 那些元素是可以被拖动的
ghostClass
:ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass
:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass
:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr
dataIdAttr: 'data-id'
forceFallback
默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass
默认false，克隆的DOM元素的类名
allbackOnBody
默认false，克隆的元素添加到文档的body中
fallbackTolerance
拖拽之前应该移动的px
scroll
默认true,有滚动区域是否允许拖拽
scrollFn
滚动回调函数
scrollSensitivity
距离滚动区域多远时，滚动滚动条
scrollSpeed
