vuedraggable嵌套块拖拽_vue使用vuedraggable实现拖拽排序布局

import draggable from “vuedraggable”;

{{item.name}}

ID：{{item.id}}

原价{{item.oldPrice}}

￥：{{item.price}}

//拖拽

shopList: [

{

id: 11111,

name: "哈阿达哈",

oldPrice: 152,

price: 55

},

{

id: 151,

name: "有哈",

oldPrice: 155,

price: 55

},

{

id: 1515,

name: "哈哈哈",

oldPrice: 152,

price: 55

},

{

id: 1511,

name: "的是哈",

oldPrice: 152,

price: 55

},

{

id: 888811,

name: "根深蒂固哈",

oldPrice: 152,

price: 55

}

],

//拖拽

getdata(evt) {

console.log(evt.draggedContext.element.text);

},

datadragEnd(evt) {

evt.preventDefault();

console.log("拖动前的索引 :" + evt.oldIndex);

console.log("拖动后的索引 :" + evt.newIndex);

console.log(this.shopList);

}

mounted() {

//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效

document.body.ondrop = function(event) {

event.preventDefault();

event.stopPropagation();

};

}