vuedraggable使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuedraggable使用相关的知识,希望对你有一定的参考价值。

参考技术A 1.引入vuedraggable

2.vuedraggable标签内部套用递归组件,一般用于tree拖拽,数据结构为id pid形式

3.配置:

4.方法:

5.可能会存在一些拖拽校验,可用:move来限制,但是有时候复杂的业务很难通过拖拽时做校验,这时候我们可以在datadragEnd这个函数里面做校验性的业务区分,直接弹窗报错提示,禁止拖拽。

vuedraggable的使用

官网地址:
https://www.npmjs.com/package/vuedraggable
https://github.com/SortableJS/Vue.Draggable

效果:https://sortablejs.github.io/Vue.Draggable/#/custom-clone
Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。

一.安装

npm i -S vuedraggable

或者引入:

二.使用

1.场景:单个列表内部简单的拖拽(不克隆)

<template>
  <div class="twoPage"> 
    <draggable  :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
        :move="checkMove" @start="dragging = true" @end="dragging = false">
        <div class="list-group-item" v-for="element in list" :key="element.name">
           element.name 
        </div>
      </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default 
  data() 
    return 
      enabled: true,
      list: [
         name: "1 - John", id: 0 ,
         name: "2 - Joao", id: 1 ,
         name: "3 - Jean", id: 2 
      ],
      dragging: false
    ;
  ,
  components:
    draggable
  ,
  mounted() 
  ,
  methods: 
    checkMove: function(e) 
      window.console.log("Future index: " + e.draggedContext.futureIndex);
    
  
;
</script>
<style lang="less">
.ghost 
  opacity: 0.5;
  background: #c8ebfb;

.list-group
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  

</style>

效果如下:

2.场景:两个列表间的拖拽(不克隆)

左边往右边拖拽,拖过来一个,左边就少一个,右边就会多一个

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default 
  data() 
    return 
     list1: [
         name: "list1 - 1:John", id: 1 ,
         name: "list1 - 2:Joao", id: 2 ,
         name: "list1 - 3:Jean", id: 3 ,
         name: "list1 - 4:Gerard", id: 4 
      ],
      list2: [
         name: "list2 - 1:Juan", id: 5 ,
         name: "list2 - 2:Edgard", id: 6 ,
         name: "list2 - 3:Johnson", id: 7 
      ]
    ;
  ,
  components:
    draggable
  ,
  mounted() 
  ,
  methods: 
    log: function(evt) 
      window.console.log(evt);
    
  
;
</script>
<style lang="less">
.ghost 
  opacity: 0.5;
  background: #c8ebfb;

.list-group
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  

</style>

options配置项,
sort:false 表示拖动时禁止其进行排序操作
group: name: ‘field’, pull: ‘clone’, put: false 表示进行克隆拖动操作,并且该name和拖动的目标位置group名称一致,如右侧draggable标签的group同样为field
draggable=“.item” 将可拖动属性下放到每一个按钮下

3.场景:两个列表间的拖拽(克隆)

效果:左边往右边拖拽,拖过来一个,左边不会少,但右边就会多一个,相当于复制。

代码场景2的区别在于:
:group=" name: 'people', pull: 'clone', put: false ":表示可拖拽克隆出去,但不接收外面拖拽过来的
group="people":简单的内部拖拽

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" :group=" name: 'people', pull: 'clone', put: false " @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default 
  data() 
    return 
     list1: [
         name: "list1 - 1:John", id: 1 ,
         name: "list1 - 2:Joao", id: 2 ,
         name: "list1 - 3:Jean", id: 3 ,
         name: "list1 - 4:Gerard", id: 4 
      ],
      list2: [
         name: "list2 - 1:Juan", id: 5 ,
         name: "list2 - 2:Edgard", id: 6 ,
         name: "list2 - 3:Johnson", id: 7 
      ]
    ;
  ,
  components:
    draggable
  ,
  mounted() 
  ,
  methods: 
    log: function(evt) 
      window.console.log(evt);
    
  
;
</script>
<style lang="less">
.ghost 
  opacity: 0.5;
  background: #c8ebfb;

.list-group
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  

</style>

效果和场景2一样

4.场景:两个列表间的拖拽-自定义克隆(克隆)

:clone="cloneDog" 这个方法自定义克隆

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" :group=" name: 'people', pull: 'clone', put: true " @change="log" :clone="cloneDog">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" :group=" name: 'people', pull: 'clone', put: true " @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
               element.name   index 
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default 
  data() 
    return 
     list1: [
         name: "list1 - 1:John", id: 1 ,
         name: "list1 - 2:Joao", id: 2 ,
         name: "list1 - 3:Jean", id: 3 ,
         name: "list1 - 4:Gerard", id: 4 
      ],
      list2: [
         name: "list2 - 1:Juan", id: 5 ,
         name: "list2 - 2:Edgard", id: 6 ,
         name: "list2 - 3:Johnson", id: 7 
      ]
    ;
  ,
  components:
    draggable
  ,
  mounted() 
  ,
  methods: 
    log: function(evt) 
      window.console.log(evt);
    ,
    cloneDog( id ) 
      return 
        id: 8,
        name: 'cat'
      ;
    
  
;
</script>
<style lang="less">
.ghost 
  opacity: 0.5;
  background: #c8ebfb;

.list-group
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  

</style>

以上是关于vuedraggable使用的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中vuedraggable的使用

带有 vuedraggable 的 Vue typescript 类组件

vue+vuedraggable实现拖动排序和删除

vuedraggable的使用

vue拖拽排序插件vuedraggable的使用 附原生使用方法

vue项目中使用vuedraggable