Move

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

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/suite-vendor/test-party/modules/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