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

第一步：安装插件vuedraggablenpm install vuedraggable第二步：在需要使用的组件中引入import draggable from 'vuedraggable'第三步：注册组件components: {draggable},第四步，代码如下片段1：存放容器，从代码片段2拖到片段1<draggab...

随便起的名字也被占用

2937人浏览 · 2019-06-22 19:24:03

随便起的名字也被占用 · 2019-06-22 19:24:03 发布

第一步：安装插件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)
    }