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	滾動速度

 

 

 

 

。