使用vuedraggable實現(xiàn)從左向右拖拽功能

更新時間：2022年04月06日 10:29:14 作者：MasonYyp

這篇文章主要為大家詳細介紹了使用vuedraggable實現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用vuedraggable實現(xiàn)從左向右拖拽的具體代碼，供大家參考，具體內(nèi)容如下

1 功能描述

使用vuedraggable實現(xiàn)從左邊框中拖拽到右邊的框中，左邊的框不能隨意拖拽改變位置，不能向左邊框中拖拽組件。右邊框中的組件可以拖動位置，但不能拖入到左邊框里。

注意事項如下：

（1）draggable的group中的name屬性必須一致；

（2）左邊框中的draggable必須含有以下屬性，group中的pull:'clone'屬性表示可以生成新的組件；group中的put:false屬性表示不能向里面拖拽組件；{sort: false}屬性表示不能更改組件的位置。

（3）左邊框中的draggable中的clone="cloneItem"表示組件被拖拽到右邊框中后，將生成的是新的組件，如果修改右邊組件的數(shù)據(jù)不會影響左邊組件的數(shù)據(jù)。cloneItem實現(xiàn)的是對每個組件的深復制。如果要實現(xiàn)修改兩邊框中的任何組件，兩邊組件都會同步變化，則需要刪除clone="cloneItem"屬性。

（4）右邊框中的draggable中的start屬性是監(jiān)聽開始拖動組件，add是監(jiān)聽添加組件，可以根據(jù)情況調(diào)用其中的數(shù)據(jù)。

（5）從左邊框拖入右邊框中判斷單個數(shù)據(jù)是否合法，可以使用move屬性，如果，左側(cè)單個數(shù)據(jù)不合法返回false，則無法添加到右側(cè)框中。

2 截圖

3 源代碼

<template>
? <div class="my_draggle">
? ? <div class="md_title">使用vuedraggable實現(xiàn)從左到右拖拽</div>
? ??
? ? <div class="md_con">
? ? ? <draggable
? ? ? ? class="mdc_left"
? ? ? ? v-model="originDataArr"
? ? ? ? v-bind="{sort: false}"
? ? ? ? v-bind:group="{ name:'person', pull:'clone', put:false }"
? ? ? ? v-bind:clone="cloneItem">
?
? ? ? ? <div v-for="(item,index) in originDataArr" v-bind:key="index">
? ? ? ? ? <span>{{item.name}}</span>&nbsp;&nbsp;
? ? ? ? ? <span>{{item.sex}}</span>
? ? ? ? </div>
?
? ? ? </draggable>
?
? ? ? <draggable
? ? ? ? class="mdc_right"
? ? ? ? v-model="newDataArr"
? ? ? ? v-bind:group="{name:'person'}"
? ? ? ? v-on:start="dragItem"
? ? ? ? v-on:add="addItem">
? ? ? ? <div v-for="(item,index) in newDataArr" v-bind:key="index">
? ? ? ? ? <span><img v-bind:src="item.icon" /></span>&nbsp;&nbsp;
? ? ? ? ? <span>{{item.name}}</span>&nbsp;&nbsp;
? ? ? ? ? <span>{{item.sex}}</span>
? ? ? ? </div>
? ? ? </draggable>
? ? </div>
? </div>
</template>
?
<script>
?
import draggable from "vuedraggable"
?
export default {
? name: 'MyDraggle',
? components:{
? ? draggable
? },
? props: {
? ? msg: String
? },
? data: function(){
? ? return{
? ? ? originDataArr: new Array(),
? ? ? newDataArr: new Array()
? ? }
? },
?
? mounted: function(){
? ? this.initData();
? },
?
? methods: {
? ? initData: function(){
? ? ? this.originDataArr = [
? ? ? ? {name:"張三", age: 15, sex: "男", icon: require("@/assets/logo.png")},
? ? ? ? {name:"李四", age: 15, sex: "男", icon: require("@/assets/logo.png")},
? ? ? ? {name:"王五", age: 15, sex: "男", icon: require("@/assets/logo.png")},
? ? ? ? {name:"小花", age: 15, sex: "女", icon: require("@/assets/logo.png")}
? ? ? ]
? ? },
?
? ? cloneItem: function(val){
? ? ? // 深復制一個節(jié)點
? ? ? return JSON.parse(JSON.stringify(val))?
? ? },
?
? ? dragItem: function(widget){
? ? ? console.log(widget);
? ? },
?
? ? addItem: function(widget){
? ? ? console.log(widget);
? ? }
? }
}
</script>
?
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my_draggle{
? position: relative;
}
?
.md_title{
? font-size: 24px;
? height: 60px;
}
?
.md_con>div{
? width: 600px;
? height: 600px;
? display: inline-block;
? border: 1px solid #CCCCCC;
? border-radius: 10px;
? vertical-align: top;
}
?
.mdc_left>div{
? height: 40px;
? line-height: 40px;
? margin-top: 6px;
? border: 1px solid #CCCCCC;
? cursor: move;
? margin: 10px 20px;
}
?
.mdc_left>div:hover{
? box-shadow: 1px 2px 4px #CCCCCC;
}
?
.mdc_right>div{
? height: 40px;
? line-height: 40px;
? margin-top: 6px;
? border: 1px solid #CCCCCC;
? cursor: move;
? margin: 10px 20px;
}
?
.mdc_right>div:hover{
? box-shadow: 1px 2px 4px #CCCCCC;
}
?
.mdc_right>div>span{
? display: inline-block;
? vertical-align: top;
}
?
.mdc_right>div>span>img{
? height: 30px;
}
?
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: