vuedraggable 实现拖拽功能

项目需求

简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。

安装 vuedraggable 插件

cnpm i -S vuedraggable

页面直接引用

import draggable from “vuedraggable”;
…
components: { draggable },

源码参考

<template>
  <div class="container">
    <div class="content">
      <div class="targetContent">
        <draggable
          :list="resultlists"
          group="article"
          :disabled="disabled"
          @start="targetStart"
          @end="targetEnd"
          class="targetCard"
          style="height: 100px"
        >
          <div
            v-for="resultlists in resultlists"
            :key="resultlists.id"
            class="list-complete-item"
          >
            <div class="list-complete-item-handle">{{ resultlists.name }}</div>
          </div>
        </draggable>
      </div>
      <div class="optionsContent">
        <draggable
          :list="targetLists"
          :options="{
            group: { name: optionsName, pull: 'clone' },
            sort: false,
          }"
          filter=".undraggable"
          @end="optionEnd"
          class="dragArea"
        >
          <div
            v-for="targetList in targetLists"
            :key="targetList.id"
            :class="{ undraggable: targetList.flag }"
            class="list-complete-item"
          >
            <div class="list-complete-item-handle2">{{ targetList.name }}</div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
  name: "DndList",
  components: { draggable },
  watch: {},
  data() {
    return {
      optionsName: "article",
      disabled: false,
      resultlists: [],
      targetLists: [
        { id: 1, name: "平板支撑" },
        { id: 2, name: "俄挺" },
        { id: 3, name: "空中自行车" },
        { id: 4, name: "波比" },
        { id: 5, name: "两头起摸脚" },
        { id: 6, name: "窄距俯卧撑" },
        { id: 7, name: "宽距俯卧撑" },
        { id: 8, name: "钻石俯卧撑" },
        { id: 9, name: "空中击掌俯卧称" },
        { id: 10, name: "深蹲提膝跳" },
      ],
    };
  },
  computed: {},
  methods: {
  	// 右侧拖拽结束事件
    optionEnd(ev) {
    // 如果拖拽目标区域和左侧区域的 name 一致，允许拖拽，并改变状态
      if (ev.to.className === "targetCard") {
        this.$set(this.targetLists[ev.oldIndex], "flag", true);
      }
    },
	// 左侧区域开始拖动事件（修改右侧区域的名字，不一致的话拖动失败）
    targetStart() {
      this.optionsName = "1111";
    },
	// 拖动结束时，把右侧区域的名字恢复
    targetEnd() {
      this.optionsName = "article";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(5, 35, 56, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 1200px;
    height: 600px;
    background-color: #052338;
    // margin: 120px auto auto;
    display: flex;

    .targetContent {
      width: 100%;
      height: 100%;
    }

    .optionsContent {
      width: 100%;
      height: 100%;
      border-left: 2px solid #4ab7bd;
    }
  }
}
.list-complete-item {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  padding: 10px 18px;
  margin: 10px 8px 0;
  background: rgba(237, 245, 255, 0.1);
  border: 1px solid #bfcbd9;
  border-radius: 0.18rem;
  cursor: pointer;
  transition: all 1s;
}

.list-complete-item.sortable-chosen {
  background: #4ab7bd;
}

.list-complete-item.sortable-ghost {
  background: #30b08f;
}
.undraggable {
  background-color: rgb(143, 233, 233);
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>

常用事件

@start = "startChange" // 开始拖动元素触发的事件
@end= "endChange" // 拖动元素结束触发的事件

常用属性配置

  :options="{
	group: { name: optionsName, pull: 'clone' }, // name 相同的集合子元素可以互相拖动
    sort: false, // 是否禁止拖动排序
    disabled: false, // 如果设置为真，则禁用sortable。
    animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
    filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
    draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
  	ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  	chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  	dragClass: "sortable-drag",  //拖动元素的class。
  }"

注意事项

1，拖动的时间元素失去样式

选项区域和目标区域的元素样式不一致

2，拖动失败

选项区域和目标区域的名字不一致，会导致拖动失败

3，控制台报提示（ props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…）

插件版本问题，:options="{}" 的写法已经被弃用，直接使用 v-bind 写法，具体参照介绍