一个全新的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元素附加拖拽特性

<f7-list class="test-dragdrop-move-list">
    <eb-list-item v-for="(item,index) of items" :key="item" :title="item" :badge="getBadge(item,index)" v-eb-dragdrop="getDragdropContext(item)">
    </eb-list-item>
  </f7-list>

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对象，具体参数以下：

名称	说明
scene	应用场景，用于隔离不一样的拖拽元素组，一般咱们使用便捷方法Vue.prototype.$meta.util.nextId('dragdrop')建立一个惟一值
item	与当前拖拽元素相关的自定义值
onDragElement	当初始化拖拽特性时激发
onDragStart	当启动拖拽时激发
onDropElement	返回当前拖拽目标元素
onDropLeave	当鼠标移出拖拽目标元素时激发
onDropEnter	当鼠标移入拖拽目标元素时激发
onDragDone	当一个有效的拖拽行为完成时激发
onDragEnd	当拖拽行为结束时激发

2. 拖拽样式

当鼠标移入一个有效的拖拽目标元素时，会自动给这个DOM元素添加一个data属性data-dragdrop-drop。咱们能够经过CSS样式来高亮显示当前拖拽目标元素

.test-dragdrop-move-list {
  li {
    &[data-dragdrop-drop] {
      background: rgba(128, 128, 128, 0.5);
    }
  }
}

更完整的data属性清单以下：

名称	说明
data-dragdrop-element	可拖拽元素
data-dragdrop-drag	当前拖拽源元素
data-dragdrop-drop	当前拖拽目标元素

拖拽事件

1. onDragElement

当初始化拖拽特性时激发，若是拖拽手柄与拖拽源元素不一样，可经过此事件返回拖拽手柄对应的拖拽源元素

onDragElement({ $el, context }) {
      // return undefined or
      return dragElement;
    },

• 参数

名称	说明
$el	拖拽手柄元素
context	拖拽Context对象

• 返回值

名称	说明
undefined	若是拖拽手柄与拖拽源元素相同，能够返回undefined，或者没必要响应此事件
dragElement	返回与拖拽手柄对应的拖拽源元素

2. onDragStart

当启动拖拽时激发。咱们能够经过此事件返回一个tooltip信息，进行友好的提示

onDragStart({ $el, context, dragElement }) {
      const indexDrag = this.__getItemIndex(context.item);
      this.indexDragIndex = indexDrag;
      const tooltip = context.item;
      return { tooltip };
    },

• 参数

名称	说明
$el	拖拽手柄元素
context	拖拽Context对象
dragElement	拖拽源元素，有可能与$el不一样

• 返回值

名称	说明
tooltip	拖拽源元素的提示信息

3. onDropElement

返回当前拖拽目标元素。能够基于DOM元素之间的位置关系来判断当前元素是否能够做为拖拽目标

onDropElement({ $el, context, dragElement, dragContext }) {
      const indexDrop = this.__getItemIndex(context.item);
      const indexDrag = this.__getItemIndex(dragContext.item);
      if (indexDrop === indexDrag || indexDrop == indexDrag + 1) return null;
      // dropElement
      const dropElement = $el;
      // tooltip
      const tooltip = context.item;
      // ok
      return { dropElement, tooltip };
    },

• 参数

名称	说明
$el	拖拽目标的手柄元素
context	拖拽目标的Context对象
dragElement	拖拽源元素
dragContext	拖拽源的Context对象

• 返回值

名称	说明
null	若是当前元素不可做为拖拽目标，就返回null
dropElement	当前拖拽目标元素
tooltip	当前拖拽目标元素的提示信息

4. onDropLeave

当鼠标移出拖拽目标元素时激发

当鼠标移出拖拽目标元素时，系统会自动移除DOM元素中的data属性data-dragdrop-drop。所以，通常而言，能够经过CSS样式来切换拖拽目标的高亮显示。咱们仍然能够经过此事件定制格外的行为

onDropLeave({ $el, context, dropElement }) {
      this.indexDropIndex = -1;
    },

• 参数

名称	说明
$el	拖拽目标的手柄元素
context	拖拽目标的Context对象
dropElement	拖拽目标元素

5. onDropEnter

当鼠标移入拖拽目标元素时激发

当鼠标移入拖拽目标元素时，系统会自动向DOM元素添加data属性data-dragdrop-drop。所以，通常而言，能够经过CSS样式来切换拖拽目标的高亮显示。咱们仍然能够经过此事件定制格外的行为

onDropEnter({ $el, context, dropElement }) {
      const indexDrop = this.__getItemIndex(context.item);
      this.indexDropIndex = indexDrop;
    },

• 参数

名称	说明
$el	拖拽目标的手柄元素
context	拖拽目标的Context对象
dropElement	拖拽目标元素

6. onDragDone

当一个有效的拖拽行为完成时激发

onDragDone({ $el, context, dragElement, dropElement, dropContext }) {
      const indexDrag = this.__getItemIndex(context.item);
      this.items.splice(indexDrag, 1);
      const indexDrop = this.__getItemIndex(dropContext.item);
      this.items.splice(indexDrop, 0, context.item);
    },

• 参数

名称	说明
$el	拖拽源的手柄元素
context	拖拽源的Context对象
dragElement	拖拽源元素
dropElement	拖拽目标元素
dropContext	拖拽目标的Context对象

7. onDragEnd

当拖拽行为结束时激发。若是须要执行清理工做，能够响应此事件

onDragEnd({ $el, context, dragElement }) {
      this.indexDragIndex = -1;
    },

• 参数

名称	说明
$el	拖拽源的手柄元素
context	拖拽源的Context对象
dragElement	拖拽源元素