About Dragdrop

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

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

Demo

resize-enus

How to develop

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

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

1. v-eb-dragdrop

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

More often, we do not drag the DOM element itself, but the handler element corresponding to the DOM element

    <div class="test-dragdrop-resize-element" :style="{width:width+'px',height:height+'px'}">
      <span class="resize-handler-col" v-eb-dragdrop="getDragdropContext('col')"></span>
      <span class="resize-handler-row" v-eb-dragdrop="getDragdropContext('row')"></span>
    </div>
    getDragdropContext(resizeDirection) {
      return {
        scene: this.dragdropScene,
        resizable: true,
        resizeDirection,
        onDragStart: this.onDragStart,
        onDragMove: this.onDragMove,
        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
resizable Indicate that this dragdrop is used for Resize
resizeDirection Resize Direction: col/row
onDragStart Fired when the dragdrop started
onDragMove Fired when dragging
onDragEnd Fired when the dragdrop ends

Dragdrop Events

1. onDragStart

Fired when the dragdrop started

Tooltip should be returned to give a friendly prompt

    onDragStart({ $el, context }) {
      const isRow = context.resizeDirection === 'row';
      const size = this.$view.sizeExtent;
      const tooltip = isRow ? this.height : this.width;
      return { size, tooltip };
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object
  • Return Values
Name Description
size The size of the container to which the current drag element belongs. It is convenient to accurately calculate the percentage of offset when dragging. Should return null If you don’t care about the percentage of the offset
tooltip Tooltip of the drag element

2. onDragMove

Fired when dragging

    onDragMove({ $el, context, diff }) {
      const isRow = context.resizeDirection === 'row';
      if (!isRow) {
        let diffAbs = parseInt(diff.abs.x);
        if (diffAbs === 0) return;
        this.width += diffAbs;
        const tooltip = this.width;
        return { eaten: true, tooltip };
      } else {
        let diffAbs = parseInt(diff.abs.y);
        if (diffAbs === 0) return;
        this.height += diffAbs;
        const tooltip = this.height;
        return { eaten: true, tooltip };
      }
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object
diff Offset of dragging
diff.abs Absolute of offset
diff.percent Percentage of offset

About diff.percent:

  1. In grid layout, DOM elements are often laid out by percentage. If you enable the dragdrop feature for these DOM elements to resize, the adjusted size will also be a percentage. You can refer to the dragdrop implementation of widget in the dashboard
  2. To get accurate diff.percent information, you must return the size information of the grid layout container in the event onDragStart
  • Return Values
Name Description
eaten If the current passed diff is valid, set eaten: true to recalculate the new dragging offset
tooltip Tooltip of the drag element

About eaten:

  • In grid layout, DOM elements are often laid out by percentage. These percentages are not consecutive values. Therefore, you need to drag a certain number of pixels to consider it an effective percentage change. At this time, we need to return eaten: false to inform the system that the current offset needs to be accumulated until an approved offset appears, and then return eaten: true

3. onDragEnd

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

    onDragEnd({ $el, context }) {
      // do nothing
    },
  • Parameters
Name Description
$el Drag Handler
context Drag Context Object