vuedraggable实现拖拽功能

2022-04-06 09:05:42 作者：EsquireY

这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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"
            v-for="resultlists in resultlists"
            :key="resultlists.id"
            class="list-complete-item"
            <div class="list-complete-item-handle">{{ resultlists.name }}</div>
        </draggable>
      <div class="optionsContent">
        <draggable
          :list="targetLists"
          :options="{
            group: { name: optionsName, pull: 'clone' },
            sort: false,
          filter=".undraggable"
          @end="optionEnd"
          class="dragArea"
            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>
        </draggable>
</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 写法，具体参照介绍

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。