How do I trigger dragging event by code using element id

Developers Modeler
1

Hi All,

I have rare case requirement, I need to move the element under the overlay (table layout) on screenshot by clicking and dragging the overlay.

I have found this diagram-js/lib/features/dragging/Dragging.js at main · bpmn-io/diagram-js · GitHub

however I am not sure how to implement it.

is this something possible?
screenshot-1704774551312

Thank you

2

As I understand you correctly:

  • You created an overlay
  • You want the overlay to move along with the element (during dragging)
3

Well it’s the other way actually, I wanted to move the element by dragging the overlay on top of element (you’ll see the element side edge showing under overlay), not sure if this is possible. Thank you for your response by the way.

I am also thinking if it’s not possible, do you think it’s much easier if I can just add a move icon in context pad instead?

4

You can manually start dragging (or element moving) and update it as you go, cf. this test.

5

Okay thank you for this however I am not sure how to use it?

let’s say I do have this code:

var elementRegistry = bpmnModeler.get('elementRegistry');

$(document).on('mousedown', ".class-of-overlay", function () {
    var elementID = $(this).attr('elementID');
    const element = elementRegistry.get(elementID);
    
    // Function to select the element above

}).on('mousemove', ".class-of-overlay", function () {
    var elementID = $(this).attr('elementID');
    const element = elementRegistry.get(elementID);

     // Function to move the element above while on mouse hold/drag

}).on('mouseup', ".class-of-overlay", function () {
    var elementID = $(this).attr('elementID');
    const element = elementRegistry.get(elementID);

     // Function to drop the element above after mouseup

});

how do I do this? sorry I am still newbie on bpmn js.

Thank you for your help!