Vue下实现拖拽（使用vuedraggable）

Vue下实现拖拽（使用vuedraggable）

由于客户提了一个比较特殊的要求，就是拖拽换房！我当时听到是崩溃的=.=谁让人家是ke(ba)hu(ba)。于是开始摸索。bd了一下，咦，果然有人已经做好了，嘿嘿嘿。贡献出
拖拽插件的github地址

安装

npm i -S vuedraggable

页面里引入

import draggable from 'vuedraggable'

注册为组件

components: {
    draggable
}

以上都是大家都会的废话（嗯？？？）。。。

页面里使用

<draggable v-model="floors">
    <transition-group type="transition">
         <div v-for="floor in floors" :key="floor.id"  group=".group">
              <div class="room-item" :style="{ background: 'red' }">{{floor.name}}</div>
        </div>
    </transition-group>
</draggable>

普通用法就是这么简单然后就可以进行拖拽了

不同list之间拖拽

因为我们的东西是分了不同的组，拖拽会在不同的组间发生，令人掉头发。不过开发人员已经考虑到了。在需要拖拽的不同组间加上group=“group1”。

禁止拖拽某些元素

有些元素不符合拖拽要求，拖拽会有bug，参考了某个答主的答案，将拖拽组件的鼠标样式换成规定样式时才让拖动。加上

<draggable v-model="floors" handle=".ddd">
     <transition-group type="transition">
         <div :class="{'ddd': (floor.id % 2 === 0)}"  v-for="floor in floors" :key="floor.id"  group=".group">
              <div class="room-item" :style="{ background: 'red' }">{{floor.name}}</div>
         </div>
     </transition-group>
</draggable>

一些事件

vuedraggable还提供了挺多事件。（不完全提供）
move事件：拖拽过程中调用，如果返回false，就会一直调用，返回true就只会调用一次。回调参数为与拖拽事件相关的数据。被拖拽的元素中的数据，拖拽目标元素所在的list。
unchoose事件：放开元素时调用，回调参数为与拖拽事件相关的数据。被拖拽的元素中的数据、下标，以及新的坐标。

我自己的实现

我的拖拽事件是基于与后台交互的基础上，所以我的拖拽只是一个表面的拖拽，最后的拖拽结果其实是由重调后台接口，数据重新渲染实现的，最终还是实现了视觉上的拖拽功能。