vuedraggable拖拽插件使用

。

文档地址：http://www.itxst.com/vue-draggable/tutorial.html

引入方式（npm）：

npm i -S vuedraggable

简单使用：

<template>
    <div>
        <el-row>
            <el-col :span="12" class="col">
                <span>A列</span>
                <draggable v-model="list"
                    chosenClass="chosen"
                    group= "name"
                    animation="300"
                    filter=".forbid"
                    :move="onMove">
                    <transition-group>
                        <div class="dragItem" :id="item.name" v-for="(item,index) in list" :key="item.name">
                            <div>索引：{{index}}</div>
                            <div class="name">姓名:<span>{{item.name}}</span></div>
                            <div>年龄:{{item.age}}</div>
                            <div>工作:{{item.job}}</div>
                        </div>
                    </transition-group>
                </draggable>
            </el-col>
            <el-col :span="12" class="col">
                <span>B列</span>
                <draggable v-model="list2"
                    chosenClass="chosen"
                    group= "name"
                    animation="300">
                    <transition-group>
                        <div class="dragItem" v-for="(item,index) in list2" :key="item.name">
                            <div>索引：{{index}}</div>
                            <div class="name">姓名:<span>{{item.name}}</span></div>
                            <div>年龄:{{item.age}}</div>
                            <div>工作:{{item.job}}</div>
                        </div>
                    </transition-group>
                </draggable>
            </el-col>
        </el-row>  
    </div>
</template>

<script>
export default {
    components:{
        draggable:() => import("vuedraggable"),
    },
    data(){
        return{
            list:[
                {name:"tom",age:18,job:"coding1"},
                {name:"bob",age:19,job:"coding2"},
                {name:"jery",age:20,job:"coding3"},
                {name:"jim",age:21,job:"coding4"},
            ],
            list2:[
                {name:"tom2",age:182,job:"coding12"},
                {name:"bob2",age:192,job:"coding22"},
                {name:"jery2",age:202,job:"coding32"},
                {name:"jim2",age:212,job:"coding42"},
            ]
        }
    },
    methods:{
        //禁止拖动到id为1的对象
        onMove(e){ 
            console.log(e);
            console.log(e.draggedContext.futureIndex);
            if(e.draggedContext.futureIndex <=1) return false;
            return true;
        },  
    }
}
</script>

<style lang="scss" scoped>
.col{
    &>div{
        min-height: 100px;
        border:14px solid purple;
        border-radius:4px;
    }
}
.dragItem{
    .name{
        font-weight: 600;
        span{
            color:red;
        }
    }
    border:1px solid blue;
    border-radius:4px;
    padding:4px;
    margin-bottom:8px;
}
</style>

效果：

上面是实现了分组拖拽，也可以组内拖拽，并且限制了不能拖拽到几号位

 

 一些属性的说明，具体可以插卡安文档，文档精巧，还有例子，查看方便：

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	滚动速度

 

 

 

 

。