vue项目中使用vuedraggable进行简单拖拽

前言

所有技术：vue + vuedraggable

拖动的实现基于 vuedraggable的插件开发。

网站

https://github.com/SortableJS/Vue.Draggable

安装方式

yarn方式
yarn add vuedraggable

npm方式
npm i -S vuedraggable

属性列表

属性名称	说明
group	拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽
delay	鼠标按下后等待n秒才允许拖动，此属性可以一定程度上防止误触操作
disabled	实现开启或禁用拖拽
scroll	默认为true,容器有滚动条时是否允许拖动到被隐藏的区域
animation	默认值为0，拖动时过渡位置就不会显的太生硬
handle	指定可拖动元素的样式名称
filter	禁止拖动元素的样式名称
chosenClass	自定义样式来方便的区分出那个元素被选中
ghostClass	目标位置占位符的样式及需要停靠位置的样式
clone	实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除

事件列表

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

单列拖拽

单列的可以随意拖拽

<template>
  <div>
    <div>{{ drag ? '拖拽中' : '拖拽停止' }}</div>
    <!-- 使用draggable -->
    <draggable 
      v-model="myArray"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
     >
      <transition-group>
        <div 
         class="item"
         v-for="item in myArray"
         :key="item.id"
         >
         {{item.name}}
         </div>
      </transition-group>
     </draggable>
  </div>
</template>

<script>
// 导入draggable组件
import draggable from 'vuedraggable'
export default {
  name: 'App',
  components: {
    // 注册draggable
    draggable
  },
  data() {
    return {
      drag: false,
      // 定义要被拖拽对象的数组
      myArray:[
        {id:1,name:'百度'},
        {id:2,name:'谷歌'},
        {id:3,name:'搜狐'},
      ]
    }
  },
  methods: {
    // 开始拖拽事件
    onStart() {
      this.drag = true
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false
    }
  }
}
</script>

<style>
/* 定义被拖拽对象的样式 */
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: 1px solid #eee;
  margin-bottom: 10px;
  /* 改变元素费光标 （可移动） */
  cursor: move;
}
/* 选中样式 */
.chosen {
  border: 1px solid #3089dc;
}
</style>

表格拖拽

只能点击数字列进行表格的拖拽

<template>
  <div style="padding:10px">
    <div>只能点击数字列进行拖拽</div>
    <table class="itxst">
       <draggable 
         v-model="list" 
         animation="500"  
         force-fallback="true"  
         handle=".move"  
         @start="onStart" 
         @end="onEnd" 
         :move="checkMove"
         > 
          <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>
</template>

<script>
// 导入draggable组件
import draggable from 'vuedraggable'
export default {
  name: 'App',
  components: {
    // 注册draggable
    draggable
  },
  data() {
    return {
      drag: false,
      // 定义要被拖拽对象的数组
      list:[
        {id:1,name:'百度'},
        {id:2,name:'谷歌'},
        {id:3,name:'搜狐'},
      ]
    }
  },
  methods: {
      checkMove(evt) {
        console.log(evt)
        return true;
    },
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
}
</script>

<style>
/*定义要拖拽元素的样式*/
table.itxst {
color:#333333;
border: #ddd solid 1px;
border-collapse: collapse;
}
table.itxst th {
border: #ddd solid 1px;
padding: 8px; 
background-color: #dedede;
}
table.itxst td {
border: #ddd solid 1px;
padding: 8px; 
background-color: #ffffff;
}
table.itxst tr {
 cursor: pointer;
}
table.itxst td.move:hover {
 cursor: move;
} 
</style>

多列移动

可以把A组的内容拖动到B组（B是个空数组），并且可以实现来回拖动

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
  <div class="title" >A组</div>
 <draggable 
    v-model="arr1" 
    :group="groupA"  
    animation="300" 
    dragClass="dragClass"  
    ghostClass="ghostClass" 
    chosenClass="chosenClass" 
    @start="onStart" 
    @end="onEnd"
  >
    <transition-group :style="style">
     <div 
       class="item" 
       v-for="item in arr1" 
       :key="item.id">
       {{item.name}}
     </div>
    </transition-group>
</draggable> 
 </div>
 <div class="col">
    <div class="title" >B组（是个空数组）</div>
    <draggable 
       v-model="arr2" 
       :group="groupB" 
       animation="300" 
       dragClass="dragClass"  
       ghostClass="ghostClass" 
       chosenClass="chosenClass" 
       @start="onStart" 
       @end="onEnd"
    >
    <transition-group :style="style">
     <div 
       class="item" 
       v-for="item in arr2" 
       :key="item.id"
     >{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      drag:false,
      groupA:{
        name:'site',
        pull:true, //可以拖从
        put:true//可以拖出
      },
       groupB:{
        name:'site',
        pull:true,
        put:true
      },
      //定义要被拖拽对象的数组
      arr1:[
        {id:1,name:'百度'},
        {id:2,name:'搜狐'},
        {id:3,name:'谷歌'},
        {id:4,name:'新浪'}
        ],
        arr2:[], //空数组
        //空数组之在的样式，设置了这个样式才能拖入
        style:'min-height:120px;display: block;'
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass{
  background-color:  blue !important;
}
.chosenClass{
  background-color: red !important;
  opacity: 1!important;
}
.dragClass{
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
.itxst{
  margin: 10px;
 
}
.title{
  padding: 6px 12px;
}
.col{
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius:5px ;
  float: left;
}
.col+.col{
 margin-left: 10px;
}

.item{
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border:  solid 1px #eee;
   background-color: #f1f1f1;
}
.item:hover{
  background-color: #fdfdfd;
  cursor: move;
}
.item+.item{
  border-top:none ;
  margin-top: 6px;
}
</style>

参照地址
https://www.itxst.com/vue-draggable/tutorial.html