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
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
:
- 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 thedashboard
- To get accurate
diff.percent
information, you must return thesize
information of the grid layout container in the eventonDragStart
- 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 returneaten: 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 |
Comments: