vue-draggable 实现拖拽效果的使用方法

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。官方网站地址安装方式yarn add vuedraggablenp

代码搬运媛

8421人浏览 · 2020-10-16 11:02:00

代码搬运媛 · 2020-10-16 11:02:00 发布

官方网站地址1
官方网站地址2

安装方式

yarn add vuedraggable
npm i -S vuedraggable

属性说明

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= “0”, 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= “true”,是否启用拖拽组件
animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle	:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter	:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable	:draggable=".item" 那些元素是可以被拖动的
ghostClass	:ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass	:ghostClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr	dataIdAttr: ‘data-id’
forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass	默认false，克隆的DOM元素的类名
allbackOnBody	默认false，克隆的元素添加到文档的body中
fallbackTolerance	拖拽之前应该移动的px
scroll	默认true,有滚动区域是否允许拖拽
scrollFn	滚动回调函数
scrollSensitivity	距离滚动区域多远时，滚动滚动条
scrollSpeed	滚动速度

事件列表

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

常用例子

单列拖拽案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HBdFDtd1-1602817269688)(/Users/mxj/Library/Application Support/typora-user-images/image-20201016105135956.png)]

CSS 样式

 /*被拖拽对象的样式*/
 .item {
 padding: 6px;
 background-color: #fdfdfd;
 border: solid 1px #eee;
 margin-bottom: 10px;
 cursor: move;
 } 
 /*选中样式*/
 .chosen {
 border: solid 2px #3089dc !important;
 }

数据结构

//定义要被拖拽对象的数组,对数组结构也没特殊要求
//元素被拖拽后数组里面对象的顺序也会随着改变
 var myArray=[
        {id:10,name:'www.itxst.com'},
        {id:20,name:'www.baidu.com'},
        {id:30,name:'www.taobao.com'},
        {id:40,name:'www.yahoo.com'}
  ]

组件调用

<!--使用draggable组件 v-model绑定数组-->
 <draggable v-model="myArray"  @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

完整代码示例

<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="element in myArray" :key="element.id">{{element.name}}</div>
    </transition-group>
</draggable> 
  </div>
</template>
<style scoped>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 1px #3089dc !important;
        }
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
   components: {
            draggable,
        },
   data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {people:'cn',id:10,name:'www.itxst.com'},
        {people:'cn',id:20,name:'www.baidu.com'},
        {people:'cn',id:30,name:'www.taobao.com'},
        {people:'us',id:40,name:'www.yahoo.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

表格拖动

handle=".move"表示鼠标放在样式为move的元素上面才能拖拽。

<!--使用draggable组件--> 
<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>

完整示例

<template>
  <div style="padding:10px"> 
    <!--使用draggable组件--> 
     <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>
<style scoped>
/*定义要拖拽元素的样式*/
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>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      list:[
        {id:1,name:'www.itxst.com'},
        {id:2,name:'www.jd.com'},
        {id:3,name:'www.ebay.com'},
        ] 
    };
  },
  methods: {
     checkMove(evt) {
        console.log(evt)
        return true;
    },
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

多列拖动

本文将介绍两两列或多列之间相互拖动，比如把某些角色或用户拖拽到每个权限组实现一些比较炫酷的效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C59riXka-1602817269691)(/Users/mxj/Library/Application Support/typora-user-images/image-20201016105655840.png)]

关键部分

两列组件设置相同的group名就可以相互拖拽了

<draggable v-model="arr1" group="site">
    <transition-group>
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
  <div class="title" >国内网站</div>
 <draggable v-model="arr1" group="site"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
 <div  class="col">
    <div class="title" >你可以把左边的元素拖到右边</div>
 <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<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>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      arr1:[
        {id:1,name:'www.itxst.com'},
        {id:2,name:'www.jd.com'},
        {id:3,name:'www.baidu.com'},
        {id:3,name:'www.taobao.com'}
        ],
        arr2:[
        {id:1,name:'www.google.com'},
        {id:2,name:'www.msn.com'},
        {id:3,name:'www.ebay.com'},
        {id:4,name:'www.yahoo.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^