vue clone html,vue.draggable的clone拷贝实现常用菜单功能
vue.draggable的clone拷贝实现常用菜单功能
vue.draggable的clone拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。
先看例子
从左边的元素拖动到右边试试看，然后再从右边拖回到左边。
例子
相关属性
属性说明
clone:options="{group:{name: 'itxst',pull:'clone'},sort: true}"
group属性的clone表示允许克隆被拖动的元素>
movemove事件用来控制那个元素不允许被拖拽和获取当前拖动元素的对象
endend拖拽结束事件，用来判断是否已经存在对象
完整代码
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
//定义要被拖拽对象的数组
arr1:[
{ id: 1, name: 'www.itxst.com(不允许停靠)' },
{ id: 2, name: 'www.jd.com' },
{ id: 3, name: 'www.baidu.com' },
{ id: 5, name: 'www.google.com' },
{ id: 4, name: 'www.taobao.com(不允许拖拽)' }
],
arr2:[
{ id: 11, name: '常用菜单' },
],
moveId:-1
};
},
methods: {
//左边往右边拖动时的事件
end1(e){
console.log(e)
var that=this;
var items=this.arr2.filter(function(m){
return m.id==that.moveId
})
//如果左边
if(items.length<2) return;
this.arr2.splice(e.newDraggableIndex, 1)
},
//右边往左边拖动时的事件
end2(e){
console.log(e)
var that=this;
var items=this.arr1.filter(function(m){
return m.id==that.moveId
})
//如果左边
if(items.length<2) return;
this.arr1.splice(e.newDraggableIndex, 1)
},
//move回调方法
onMove(e,originalEvent){
this.moveId=e.relatedContext.element.id;
//不允许停靠
if (e.relatedContext.element.id == 1) return false;
//不允许拖拽
if (e.draggedContext.element.id == 4) return false;
if (e.draggedContext.element.id == 11) return false;
return true;
},
},
};
Array.prototype.filter = Array.prototype.filter || function(func) {
var arr = this;
var r = [];
for (var i = 0; i < arr.length; i++) {
if (func(arr[i],i,arr)) {
r.push(arr[i]);
}
}
return r;
}
.itxst {
margin: 10px;
text-align :left;
}
.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;
text-align: left;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item2 {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: pink;
text-align: left;
}
.item2 + .item2 {
border-top: none;
margin-top: 6px;
}
.item2:hover {
outline: solid 1px #ddd;
cursor: move;
}