开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue draggable学习 -> 正文阅读

[JavaScript知识库]vue draggable学习

1.安装

npm i -S vuedraggable

2.常用例子

在此之前，

    <draggable v-model="myArr" @start="onStart" @end="onEnd" animation="1000">
      <transition-group>
        <div class="item" v-for="element in myArr" :key="element.id">{{ element.name }}</div>
      </transition-group>
    </draggable>

这段代码要看懂的，myArr是个json数组

2.1 单列拖拽

demo:
在这里插入图片描述

2.2 表格拖拽

demo:
在这里插入图片描述

2.3 多列拖拽

demo:
在这里插入图片描述

这里拖拽到下面的数据显示之所以不正常，貌似是拖拽的两个数据结构和字段名要一致，不然虽然可以拖拽成功，但是显示会有问题的

3. 属性列表

3.1 group拖拽分组

vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如下面例子中group都为itxst的组之间可以相互拖动

意思就是说正确设置了group属性后就可以实现多列拖拽了

3.1.1 group属性

//设置方式一，直接设置组名
group:‘test’
//设置方式，object，也可以通过自定义函数function实现复杂的逻辑
group:{
name:‘test’,//组名为test
pull: true|false| ‘clone’|array|function,//是否允许拖出当前组
put:true|false|array|function,//是否允许拖入当前组
}

3.1.1.1 字符串类型用法（第一种）

<draggable v-model="arr1" group="test">
...
</draggable>

<draggable v-model="arr2" group="test">
...
</draggable>

这样两个可以互相拖拽了的

3.1.1.2 Object类型用法

//可以比字符串名称更精确的控制拖入拖出
<draggable v-model="arr1" :group="groupA">
...
</draggable>

<draggable v-model="arr2" :group="groupB">
...
</draggable>
<script> 
export default { 
  data() {
    return { 
      //group属性对象
      groupA: {
        name: "test",
        pull: true,  //可以拖出
        put: true,   //可以拖入
      },
      groupB: {
        name: "test",
        pull: true,
        put: true,
      }, 
    };
  }, 
};
</script>

3.1.1.3 自定义函数用法

//通过自定义函数可以精确的控制是否允许拖入拖出
<draggable v-model="arr1" :group="groupA">
...
</draggable>
<draggable v-model="arr2" :group="groupB">
...
</draggable>
<script> 
export default { 
  data() {
    return { 
      //group属性对象
      groupA: {
        name: "test",
        put: true, //可以拖入
        pull: () => {
          if (this.arr1.length <= 3) {
            this.message = "元素小于等于3不允许再拖拽了";
          }
          return this.arr1.length > 3;
        },
      },
      groupB: {
        name: "test",
        pull: true,
        put: true,
      }, 
    };
  },   
};
</script>

3.2 delay响应时间

vue.draggable delay 鼠标按下后等待n秒才允许拖动，此属性可以一定程度上防止误触操作，比如设置delay为1000表示按下一秒后才允许拖动。

3.3 disabled启用禁用

通过disabled属性实现开启或禁用vue.draggable的拖拽效果。

注意的是这里开启禁用的是全局的拖拽效果，不是个别的

3.4 scroll 是否允许滚动

属性名称	说明
scroll	默认为true,容器有滚动条时是否允许拖动到被隐藏的区域

demo:
在这里插入图片描述

3.5 animation 过渡效果

通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。默认值为0

没有animation的效果：
在这里插入图片描述
有animation的效果：

3.6 handle 鼠标在指定元素上才允许拖动

当鼠标落在handle指定的元素上面时才允许拖动，如下面的例子只能点击加号区域才能拖动，点击其他区域则无法拖动。

这个属性就可以指定特定的元素(这里的例子是move)是否可以拖动。常用例子中的第二个就用到了handle

    <p>表格拖拽</p>
    <div style="padding:10px">
      <!--使用draggable组件-->
      <div>点击第一列数字进行拖动，其他列拖拽无效</div>
      <table class="itxst">
        <draggable delay="20" v-model="list" :group="groupA" animation="500" 
          handle=".move">
          <tr v-for="item in list" :key="item.id">
            <td style="width:50px" class="move">{{ item.id }}</td>
            <td style="width:250px">{{ item.name }}</td>
          </tr>
        </draggable>
      </table>
    </div>

3.7 filter 排除不允许拖动的元素

如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，

本例中设置的是id为1的元素不能被拖拽,
在这里插入图片描述

    <draggable v-model="myArr" @start="onStart" @end="onEnd" animation="1000" filter=".forbid">
      <transition-group>
        <div :class="element.id==1?'item forbid':'item'" v-for="element in myArr" :key="element.id">{{ element.name }}</div>
      </transition-group>
    </draggable>

3.8 chosenClass(选中元素的样式)和hostClass(目标位置占位符的样式)

通过vue.draggable的chosenClass属性设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。

demo:
在这里插入图片描述

<template>
  <div class="home">
    <p>单列拖拽</p>
    <div>{{ drag ? '拖拽中' : '拖拽停止' }}</div>
    <draggable v-model="myArr" @start="onStart" @end="onEnd" animation="1000" filter=".forbid" ghostClass="ghost"
      chosenClass="chosen" forceFallback="true">
      <transition-group>
        <div :class="element.id == 1 ? 'item forbid' : 'item'" v-for="element in myArr" :key="element.id">{{ element.name }}
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
// @ is an alias to /src

import draggable from 'vuedraggable'
export default {
  name: 'Home',
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      myArr: [{ id: 1, name: 'elementui table组件多选获取选中行的数据' },
      { id: 2, name: 'ElementUI Select选择器获取选中对象' },
      { id: 3, name: 'echarts 定制legend内容，显示和位置' },
      { id: 4, name: 'Vue ElementUi纯table组件实现购物车全选，结算' }],
    }
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;

    },
    //拖拽结束事件
    onEnd() {
      console.log(this.list)
      this.drag = false;
    },
    checkMove(evt) {
      console.log(evt)
      return true;
    },
  },
}
</script>

<style>
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

.item:hover {
  background-color: #f1f1f1;
  cursor: move;
}

.chosen {
  background-color: #000 !important;
  color: #fff;
}

.ghost {
  background-color: red !important;
}
</style>

需要注意的是像例子中的chosen class的样式需要加上!impoortant

3.9 clone拷贝拖拽

vue.draggable的clone拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。

3.9.1 普通的拷贝拖拽

demo:
在这里插入图片描述

<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list1"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list2"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    };
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
<style scoped>
.list-group-item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

.list-group-item:hover {
  background-color: #f1f1f1;
  cursor: move;
}</style>

可以看到的是，这里算是个最简单的clone拖拽demo了。需要注意的就是设置了:group="{ name: ‘people’, pull: ‘clone’, put: false }"之类的就是克隆对象，这里是设置了不能移入的，不然是可以克隆对象一直增加的。
但是上个demo中会发现有警告的，key重复了的

3.9. 常用的的拷贝拖拽

进阶下，demo:
在这里插入图片描述

<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        :clone="cloneDog"
        @change="log"
      >
        <div class="list-group-item" v-for="element in list1" :key="element.id">
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div class="list-group-item" v-for="element in list2" :key="element.id">
          {{ element.name }}
        </div>
      </draggable>
    </div>


  </div>
</template>

<script>
import draggable from 'vuedraggable'
let idGlobal = 8;
export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "dog 1", id: 1 },
        { name: "dog 2", id: 2 },
        { name: "dog 3", id: 3 },
        { name: "dog 4", id: 4 }
      ],
      list2: [
        { name: "cat 5", id: 5 },
        { name: "cat 6", id: 6 },
        { name: "cat 7", id: 7 }
      ]
    };
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    },
    cloneDog({ id }) {
      return {
        id: idGlobal++,
        name: `cat ${id}`
      };
    }
  }
};
</script>
<style scoped></style>

4.事件列表

事件名称	说明

start	开始拖动时触发的事件
add	从一个数组拖拽到另外一个数组时触发的事件
remove	移除事件
update	拖拽变换位置时触发的事件
end	拖拽完成时的事件
choose	鼠标点击选中要拖拽元素时的事件
unchoose	选中后松开鼠标的事件
sort	位置变化时的事件
clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素