实用的 vue-dragging（awe-dnd） 拖拽插件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

vue-dragging（awe-dnd）拖拽插件也是一个实用的 vue 拖拽组件，当对于 Vue.Draggable 来说，换位置时仅仅是将拖元素和被拖拽元素换了个位置。

awe-dnd 基础介绍及使用：

www.npmjs.com/package/awe…

安装

npm install awe-dnd --save

引入

//main.js
import VueDND from "awe-dnd";
Vue.use(VueDND);

实战

数据模拟及数据处理可查看上一篇实用的 Vue.Draggable 拖拽插件

1. 拖拽组件数据渲染通过v-dragging实现，可以定义数据源list，数据项item和数据分组标识group。如下所示：v-dragging="{ item: ele, list: item.data, group: item.type }"
2. 选中（card-active），未选中（card）样式控制通过checkedKeys来处理。如下所示，item.checkedKeys.includes(ele.key)
3. 占位样式处理：.card.dragging
4. 事件处理：this.$dragging.$on("dragged"), this.$dragging.$on("dragend")

<template>
  <!-- 其他部分和Vue.Draggable一样 -->
  <div class="m-list-item-content">
    <transition-group>
      <!-- 此处使用的是ant-dnd组件 -->
      <div
        :class="[
                  'card',
                  { 'card-active': item.checkedKeys.includes(ele.key) },
                ]"
        v-for="ele in item.data"
        v-dragging="{ item: ele, list: item.data, group: item.type }"
        :key="ele.key"
        @click="handleDragClick(ele, item, index)"
      >
        {{ ele.name }}
      </div>
    </transition-group>
  </div>
</template>

<script>
  export default {
    mounted() {
      // 拖拽后触发的事件
      this.$dragging.$on("dragged", ({ value }) => {
        console.log(value.item);
        console.log(value.list);
      });
      this.$dragging.$on("dragend", () => {});
    },
    methods: {
      handleDragClick(data, item, index) {
        if (!R.includes(data.key, item.checkedKeys)) {
          item.checkedKeys = R.append(data.key, item.checkedKeys);
        } else {
          item.checkedKeys = R.filter((o) => o !== data.key, item.checkedKeys);
        }
        this.$set(this.dragList, index, item);
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 占位样式处理
  .card.dragging {
    transform: scale(1.05);
    color: #fff;
    background-color: #1890ff;
  }
</style>