基於vue的拖拽排序，添加等，插件vuedraggable

第一步：安裝插件vuedraggable

npm install vuedraggable 

第二步：在需要使用的組件中引入

import draggable from 'vuedraggable' 

第三步：註冊組件

 components: {
    draggable
  },

第四步，代碼如下

片段1：存放容器，從代碼片段2拖到片段1

   <draggable class="dragArea list-group"
                         :list="bannerList2"
                         group="people"
                         @change="log">
                <div class="list-group-item"
                     v-for="(elem,index) in bannerList2"
                     :key="index">
                  <span class="font-weight">{{index+1}}</span>
                  <span class="order-number">{{elem.bannerName}}</span>
                  <span>
                    <viewer>
                      <img class="table-image"
                           :src="elem.imgUrl"
                           title="點擊預覽">
                    </viewer>
                  </span>
                  <span class="delete-icon el-icon-delete-solid"
                        @click="deleteListItem(index)"></span>
                </div>
 </draggable>

片段2：主的容器，可以從此拖到代碼片段1中 

 <draggable class="dragArea1 list-group"
                         :list="bannerList1"
                         :group="{ name: 'people', pull: 'clone', put: false }"
                         :draggable="dragOffClass"
                         @change="log">
                <div class="list-group-item list-group-item2"
                     v-for="(elem,index) in bannerList1"
                     :key="index">
                  <span class="font-weight">{{index+1}}</span>
                  <span class="order-number">{{elem.bannerName}}</span>
                  <span>
                    <viewer>
                      <img class="table-image"
                           :src="elem.imgUrl"
                           title="點擊預覽">
                    </viewer>
                  </span>
                </div>
</draggable>

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/