基於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/
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章