第Vuedraggable實現從左到右拖拽功能本文實例為大家分享了Vuedraggable實現從左到右拖拽功能的具體代碼，供大家參考，具體內容如下

1、安裝插件

npminstallvuedraggable

2、在需要使用的組件中引入

importdraggablefrom‘vuedraggable'

3、注冊組件

components:{undefined

draggable

}

示例：

div

div

!--左側按鈕--

draggable

v-model="list1"

draggable=".c-item"

v-bind="dragOptionsL"

:options="{sort:false,group:{name:'field',pull:'clone',put:false}}"

divv-for="(d,index)inlist1":key="index"{{}}/div

/draggable

/div

div

!--右側按鈕--

draggablegroup="field":list="list2"v-bind="dragOptionsR"@change="toChange"

divv-for="(d,k)inlist2":key="k"{{}}/div

/draggable

/div

/div

script

importdraggablefrom"vuedraggable";

exportdefault{

data(){

return{

list1:[

{name:"11",id:1},

{name:"22",id:2},

{name:"33",id:3},

{name:"44",id:4},

],

list2:[

{name:"5",id:5},

{name:"6",id:6},

{name:"7",id:7},

],

};

components:{

draggable,

computed:{

dragOptionsL(){

return{

disabled:false,

ghostClass:"ghostL",//注意：在左側上下移動時，使用這個類；移動到右側時，使用ghostR類

};

},

dragOptionsR(){

return{

animation:500,

disabled:false,

ghostClass:"ghostR",//注意：在右側上下移動時，使用這個類

};

},

methods:{

toChange(e){

console.log(e);

if(e.added){

console.log(this.list2);

}

}

/script

style

.test-left{

float:left;

width:300px;

.test-right{

float:left;

margin-left:20px;

width:300px;

.test-rightdiv{

min-height:80px;/*為了防止右側開始沒有內容時不可以拖動*/

.item{

width:100%;

height:60px;

line-height:60px;

background:#f2f2f2;

margin-bottom:12px;

.ghostL{

opacity:0.5;

width:230px;

.ghostR{

opacity:0;

width:230px;

}

注意事項：

1.左邊draggle插件，:group={name:dragobj,pull:clone,put:false}

{name:dragobj取相同名字的可以來回拖拽；pull:clone從左向右克隆，后面用右邊draggle插件的dragChangeR()方法讓左側數據隱藏了，left并不是真正的刪除這條數據；put:false禁止從右向左拖放數據}

2.options中的sort:false表示禁止上下拖動

3.問題：從左往右移動時，右側一直會出現items的name值，拖拽結束后，name值消失

解決方法：左右分別綁定一個v-bind=dragOptionsL，v-bind=dragOptionsR