关于拖拽CabloyJS提供了完整的拖拽功能，可以实现移动和调整大小两大功能。这是移动开发的解释。关于resizing开发请参考：拖放：resizing演示开发步骤下面以模块test-party为例说明拖放（移动）的开发步骤，请参考文件src/module/test-party/front/src/kitchen-完整源码sink/pages/dragdrop/dragdropMove.vue，这里只说明开发点1.v-eb-dragdrop使用指令v-eb-dragdrop添加拖放需要移动的DOM元素的特性getDragdropContext(item){返回{场景：this.dragdropScene，项目，onDragElement：this.onDragElement，onDragStart：这个。onDragStart,onDropElement:this.onDropElement,onDropLeave:this.onDropLeave,onDropEnter:this.onDropEnter,onDragDone:this.onDragDone,onDragEnd:this.onDragEnd,}}，我们传递一个拖动的Context对象给v-eb-dragdrop，具体参数如下：名称描述场景的应用场景，用于隔离来自不同组的拖拽元素，通常我们在初始化拖拽特性触发时，使用便捷方法Vue.prototype.$meta.util.nextId('dragdrop')创建与当前拖拽元素onDragElement相关的唯一值项的自定义值onDragStart在拖动开始时触发onDropElement在当前拖动目标元素上触发onDropLeave在鼠标移出拖动目标元素时触发onDropEnter在鼠标移入拖动目标元素时触发onDragDone在有效拖动操作完成时触发onDragEnd在拖动时触发Fired当行为结束时2.拖动样式当鼠标移动到有效的拖动目标元素时，会自动为DOM元素添加一个数据属性data-dragdrop-drop。我们可以通过CSS样式来高亮当前拖动的目标元素.test-dragdrop-move-list{li{&[data-dragdrop-drop]{background:rgba(128,128,128,0.5);更完整的数据属性列表如下：namedescriptiondata-dragdrop-element可拖动元素data-dragdrop-drag当前拖动源元素data-dragdrop-drop当前拖动目标元素拖动事件1.onDragElement在拖动时触发feature被初始化，如果拖动句柄与拖动源元素不同，该事件可以返回拖动句柄对应的拖动源元素onDragElement({$el,context}){//returnundefinedorreturndragElement;},参数名称说明$el拖动句柄元素上下文dragContext对象返回值名称说明undefined如果拖动句柄与拖动源元素相同，则可以返回undefined，也可以不响应此事件。dragElement返回拖动手柄对应的拖动源元素。2.onDragStart拖动开始时触发。我们可以通过这个事件返回一个tooltip信息来做友好的提示onDragStart({$el,context,dragElement}){constindexDrag=this.__getItemIndex(context.item);this.indexDragIndex=indexDrag;consttooltip=context.item;返回{工具提示};},参数名称描述$el拖拽句柄元素context拖拽Context对象dragElement拖拽源元素，可能与$el返回值名称描述tooltip拖拽源元素提示信息不同3.onDropElement返回当前拖拽目标元素。可以根据DOM元素之间的位置关系来判断当前元素是否可以作为拖动目标constindexDrag=这个。__getItemIndex(dragContext.item);如果(indexDrop===indexDrag||indexDrop==indexDrag+1)返回null;//dropElementconstdropElement=$el;//工具提示consttooltip=context.item;//好的return{dropElement,tooltip};},参数名称描述$el拖拽目标上下文对象句柄元素拖拽目标上下文对象dragElement拖拽源元素dragContext拖拽源上下文对象返回值名称描述null如果当前元素不能作为拖拽目标，返回提示nulldropElement的当前拖动目标元素tooltip信息4.onDropLeave当鼠标移出拖动目标元素时触发当鼠标移出拖动目标元素时，系统会自动移除DOM元素data-dragdrop中的data属性-降低。所以一般情况下，拖动目标的高亮可以通过CSS样式来切换。我们仍然可以通过此事件onDropLeave({$el,context,dropElement}){this.indexDropIndex=-1;自定义额外的行为；},参数名说明$el拖拽目标上下文的句柄元素拖拽目标的上下文对象dropElement拖拽目标元素5.onDropEnter鼠标移入拖拽目标元素时触发当鼠标移入拖拽目标元素时，系统会自动给DOM元素添加数据属性data-dragdrop-drop。所以一般情况下，拖动目标的高亮可以通过CSS样式来切换。我们仍然可以通过这个事件自定义额外的行为onDropEnter({$el,context,dropElement}){constindexDrop=this.__getItemIndex(context.item);this.indexDropIndex=indexDrop;},参数名称描述$eldragtarget句柄元素contextdragtargetContextobjectdropElementdragtargetelement6.onDragDone当一个有效的拖动动作完成时触发onDragDone({$el,context,dragElement,dropElement,dropContext}){constindexDrag=this.__getItemIndex(context.item);this.items.splice(indexDrag,1);constindexDrop=this.__getItemIndex(dropContext.item);this.items.splice(indexDrop,0,context.item);},参数名称说明$el拖动源上下文的句柄元素拖动源的Context对象dragElement拖动源元素dropElement拖动目标元素dropContext拖动目标的Context对象7.onDragEnd拖动行为结束时触发。如果需要执行清理工作，可以响应这个事件onDragEnd({$el,context,dragElement}){this.indexDragIndex=-1;},参数名称说明$el拖拽源context的句柄元素拖拽源的Context对象dragElement拖拽源元素
