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拖拽结束事件，用来判断是否已经存在对象

完整代码

clone例子,左边往右边拖动试试看

{{item.name}}

{{item.name}}

//导入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;

}