本文共 3190 字，大约阅读时间需要 10 分钟。

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

安装方式

yarn add vuedraggablenpm i -S vuedraggable

属性说明

事件列表

常用例子

单列拖拽案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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'}  ]

组件调用

    
       
         
     
      {
  {item.name}}
     
    
    
   

完整代码示例

表格拖动

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

    
   
    点击第一列数字进行拖动，其他列拖拽无效
   
 
           
   
   
         
     
                
{
  {item.id}}
                
{
  {item.name}}
            
          
   

完整示例

多列拖动

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

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

关键部分

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

       
         
     
      {
  {item.name}}
     
    
    
   

完整代码

转载地址：http://javii.baihongyu.com/