vue 使用 vuedraggable插件实现拖拽功能

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

前言

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。

• 文档 www.itxst.com/vue-draggab…

• 代码 github.com/SortableJS/…

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

属性说明

如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js里面有更详细的例子。

事件列表

我们的需求

原文档这块写的不清晰

• 从A区间可以往B区拖动
• A区的数据不删除
• A区不能往A区拖动
• A区的数据需要经过处理，才能放到B

如何达到上面的需求呢，这里要用到 自定义控制

vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠

//move回调方法
onMove(e,originalEvent){ 
         console.log(e);
         console.log(originalEvent);
         //false表示阻止拖拽
         return true;
  },  
  
/** e对象结构注释
draggedContext: 被拖拽的元素
      index: 被拖拽的元素的序号
      element: 被拖拽的元素对应的对象
      futureIndex: 预期位置、目标位置
relatedContext: 将停靠的对象
      index: 目标停靠对象的序号
      element: 目标的元素对应的对象
      list:  目标数组
      component: 将停靠的vue组件对象
**/

具体代码 A 拖拽组件配置

<vuedraggable
          v-model="arr1"
          :move="onMove"
          :options="{ group: { name: 'site', pull: 'clone' }, sort: true }"
          animation="300"
          drag-class="dragClass"
          ghost-class="ghostClass"
          chosen-class="chosenClass"
          @add="onAdd"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div v-for="item in arr1" :key="item.id" class="item">
              <img
                style="margin-bottom: 20px"
                src="https://img3.bitautoimg.com/autoalbum/files/20190416/918/0333509185_6.png"
                width="100px"
              />
              {{ item.name }}
            </div>
          </transition-group>
        </vuedraggable>

B拖拽组件配置

<vuedraggable
      v-model="arr2"
      group="site"
      animation="300"
      @add="onAdd"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group>
        <div v-for="item in arr2" :key="item.id" class="item">
          {{ item.name }}
        </div>
      </transition-group>
</vuedraggable>

方法

methods: {
    onMove(e, originalEvent) {
      console.log(e, originalEvent, 'onMove')
      // 停靠对象 如果停靠对象是A区，就拒绝掉
      if (e.relatedContext.element.isConfig) return false

      // 拖拽对象
      // if (e.draggedContext.element.isConfig) return false
      return true
    }
}

以及data数据

  data() {
    return {
      arr1: [
        { id: 1, isConfig: true, name: 'www.itxst.com' },
        { id: 2, isConfig: true, name: 'www.jd.com' },
        { id: 3, isConfig: true, name: 'www.baidu.com' },
        { id: 4, isConfig: true, name: 'www.taobao.com' },
      ],
      arr2: [
        { id: 5, name: 'www.google.com' },
        { id: 6, name: 'www.msn.com' },
        { id: 7, name: 'www.ebay.com' },
        { id: 8, name: 'www.yahoo.com' },
      ],
    }
  },

PS:注意事项

• A区组件添加 :options=”{ group: { name: ‘site’, pull: ‘clone’ }, sort: true }”

其中的 name：site 指向B组件的group属性，表示clone到B 但是A不删除

• 在move方法中 e.relatedContext.element 代表停靠的数据对象，也就是B的元素，e.draggedContext.element 被拖拽的元素对象。 也就是A元素。然后开始处理A的数据