基于vue的拖拽排序，添加等，插件vuedraggable
第一步：安装插件vuedraggable
npm install vuedraggable 第二步：在需要使用的组件中引入
import draggable from 'vuedraggable' 第三步：注册组件
components: {
draggable
},第四步，代码如下
片段1：存放容器，从代码片段2拖到片段1
{{index+1}}
{{elem.bannerName}}
![]( "点击预览")
片段2：主的容器，可以从此拖到代码片段1中
{{index+1}}
{{elem.bannerName}}
![]( "点击预览")
js代码片段
//data数据
dragOffClass: ".list-group-item2", // 允许拖拽
bannerList1: [
{
id: 12,
bannerName: "娃哈哈新品推广1娃哈哈新品推广1娃哈哈新品推广1娃哈哈新品推广1",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 13,
bannerName: "娃哈哈新品推广2",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 14,
bannerName: "娃哈哈新品推广3",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 15,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 17,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 18,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 19,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 20,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 21,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 22,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 23,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
},
{
id: 24,
bannerName: "娃哈哈新品推广4",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561031932577&di=81201b9566d7fed4ce48b78ef484008b&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg02_p%2Fi2%2F14317024932485864%2FT1saRuXtXgXXXXXXXX_%2521%25210-item_pic.jpg",
detailsUrl: "https://www.wahaha.com/app/page/details/wahaha.html",
sortNum: 1
}
],
bannerList2: []watch:{
//监听函数 监听的选中的大于5条数据时，改变片段2中为不可以拖动
bannerList2 (value) {
console.log("val", value)
if (value.length >= 5) {
this.dragOffClass = ""
} else {
this.dragOffClass = ".list-group-item2"
}
}
}
//拖动时触发log函数：change触发的
log: function (evt) {
window.console.log(evt)
console.log(uniqueArray(this.bannerList2, "id"))
this.bannerList2 = uniqueArray(this.bannerList2, "id")
},
//删除片段1中的单条数据
deleteListItem (index) {
this.bannerList2.splice(index, 1)
}相关文档
官方地址：https://sortablejs.github.io/Vue.Draggable/#/simple
Github：https://github.com/SortableJS/Vue.Draggable
Demo：https://david-desmaisons.github.io/draggable-example/