vue拖动添加模块展示_一个全新的Vue拖拽特性实现：“移动”部分

关于拖拽

CabloyJS提供了完备的拖拽特性，可以实现移动和调整尺寸两大类功能，这里对移动的开发进行阐述

关于调整尺寸的开发，请参见：拖拽：调整尺寸

演示

开发步骤

下面以模块test-party为例，说明拖拽(移动)的开发步骤

完整源码请参见文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropMove.vue，这里只说明开发要点

1. v-eb-dragdrop

通过directive v-eb-dragdrop向需要实现移动的DOM元素附加拖拽特性

getDragdropContext(item) {

return {

scene: this.dragdropScene,

item,

onDragElement: this.onDragElement,

onDragStart: this.onDragStart,

onDropElement: this.onDropElement,

onDropLeave: this.onDropLeave,

onDropEnter: this.onDropEnter,

onDragDone: this.onDragDone,

onDragEnd: this.onDragEnd,

}

},

我们向v-eb-dragdrop传入一个拖拽Context对象，具体参数如下：

名称

说明

sc