About Dragdrop

CabloyJS provides complete drag and drop features, which can realize two major functions of Move and Resize. Here, the development of Move is described

For the development of Resize, please refer to Dragdrop: Resize

Demo

move-enus

How to develop

Take the module test-party as an example to illustrate the development steps of Dragdrop(Move)

For the complete source code, please refer to the file src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropMove.vue. Here are only the development points

1. v-eb-dragdrop

Add the dragdrop feature to DOM elements through vue-directive v-eb-dragdrop

  <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,
      }
    },

We pass in a dragdrop Context object to v-eb-dragdrop. The specific parameters are as follows:

Name Description
scene The application scenario is used to isolate different dragdrop element groups. Usually, we use the convenient method Vue.prototype.$meta.util.nextId('dragdrop') to create a unique value
item Custom values associated with the current dragdrop element
onDragElement Fired when the dragdrop feature is initialized
onDragStart Fired when the dragdrop started
onDropElement return the current drop target element
onDropLeave Fired when the mouse moves out of the drop target element
onDropEnter Fired when the mouse moves in the drop target element
onDragDone Fired when a valid dragdrop is done
onDragEnd Fired when the dragdrop ends

2. Dragdrop Styles

When the mouse moves into a valid dragdrop target element, a data attribute data-dragdrop-drop will be automatically added to the DOM element. We can use CSS style to highlight the current dragdrop target element

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

A more complete list of data attributes is as follows:

Name Description
data-dragdrop-element Draggable element
data-dragdrop-drag The current dragdrop source element
data-dragdrop-drop The current dragdrop target element

Dragdrop Events

1. onDragElement

Fired when the dragdrop feature is initialized

If the drag handler is different from the drag source element, the drag source element corresponding to the drag handler can be returned through this event

    onDragElement({ $el, context }) {
      // return undefined or
      return dragElement;
    },
  • Parameters
Name Description
$el Drag Handler
context Dragdrop Context Object
  • Return Values
Name Description
undefined if the drag handler is the same as the drag source element, undefined can be returned, or do not have to respond to this event
dragElement Return the drag source element corresponding to the drag handler

2. onDragStart

Fired when the dragdrop started

Tooltip should be returned to give a friendly prompt

    onDragStart({ $el, context, dragElement }) {
      const indexDrag = this.__getItemIndex(context.item);
      this.indexDragIndex = indexDrag;
      const tooltip = context.item;
      return { tooltip };
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object
dragElement Drag Source Element, maybe different from the drag handler
  • Return Values
Name Description
tooltip Tooltip of the drag source element

3. onDropElement

Return the current drop target element

You can judge whether the current element can be used as a valid drop target based on the location relationship between DOM elements

    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 };
    },
  • Parameters
Name Description
$el Drop Handler
context Drop Context Ojbect
dragElement Drag Source Element
dragContext Drag Context Object
  • Return Values
Name Description
null Returns null if the current element cannot be a drop target
dropElement The current drop target element
tooltip Tooltip of the current drop target element

4. onDropLeave

Fired when the mouse moves out of the drop target element

When the mouse moves out of the drop target element, the system will automatically remove the data attribute data-dragdrop-drop from the DOM element. Therefore, in general, we can use CSS styles to toggle the highlighting of drop targets. While we can still customize extra behavior through this event

    onDropLeave({ $el, context, dropElement }) {
      this.indexDropIndex = -1;
    },
  • Parameters
Name Description
$el Drop Handler
context Drop Context Object
dropElement Drop Target Element

5. onDropEnter

Fired when the mouse moves in the drop target element

When the mouse moves in the drop target element, the system will automatically add the data attribute data-dragdrop-drop to the DOM element. Therefore, in general, we can use CSS styles to toggle the highlighting of drop targets. While we can still customize extra behavior through this event

    onDropEnter({ $el, context, dropElement }) {
      const indexDrop = this.__getItemIndex(context.item);
      this.indexDropIndex = indexDrop;
    },
  • Parameters
Name Description
$el Drop Handler
context Drop Context Object
dropElement Drop Target Element

6. onDragDone

Fired when a valid dragdrop is done

    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);
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object
dragElement Drag Source Element
dropElement Drop Target Element
dropContext Drop Context Object

7. onDragEnd

Fired when the dragdrop ends, which can be responded to perform cleanup

    onDragEnd({ $el, context, dragElement }) {
      this.indexDragIndex = -1;
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object
dragElement Drag Source Element