Extend jsplumb.draggable drag behavior

Question

I am sure that I am missing something here, but I would like to extend the drag behavior of a div with jsPlumb.draggable class attributes that is attached to an endpoint, while preserving the jsPlumb.draggable attributes.

I would like something like this (adapted from this SO):

$('#dragcodes').draggable(
    {
        drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        console.log('x: ' + xPos);
        console.log('y: ' + yPos);
    }
});

on an element that is created using:

jsPlumb.draggable($(".dragcodes"));

Here is an example of what I am trying to do. I want the top box to read the position out on drag like the bottom one is, but cannot figure out how to hack the drag: function in jsPlumb.draggable. The binding behavior here is getting close, but I want to target the div that is attached to the endpoint. If I override the drag: functionality, I lose the jsPlumb.draggable attributes. Thanks in advance for your help.

score 7 · Answer 1 · edited Feb 02 '20 at 07:00

7

In Version 1.6.3 the following Code works:

jsPlumb.draggable("#dragcodes", {
  drag: function (event, ui) { //gets called on every drag
    console.log(ui.position);  //ui.position.left and ui.position.top
  }
});

edited Feb 02 '20 at 07:00

DinoMyte

8,737
1
19
26

answered Jul 07 '14 at 15:51

Daniel Budick

1,780
1
18
19

good call. this is a better solution IMHO. This works in 1.5.5 as well – Sam Holder Oct 29 '14 at 21:26
1

Sadly, this doesn't seem to work anymore: ui is undefined. Version 1.7.10 – Yster Oct 06 '15 at 08:37

MrNobody007 · Accepted Answer · 2014-02-20T10:44:41.470

5

jsPlumb.draggable helps to update the DOM element whenever it is dragged. Instead you can write that code in jQuery draggable as:

$('#dragcodes').draggable(
{
    drag: function(){
    jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
    //followed by your code
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    console.log('x: ' + xPos);
    console.log('y: ' + yPos);
}
});

Now there is no need for jsPlumb.draggable($(".dragcodes"));

edited Feb 20 '14 at 10:44

answered Dec 30 '13 at 09:02

MrNobody007

1,827
11
32

Actually this solution cause a performance hit if you have a lot of elements – Alena Kastsiukavets Jul 18 '16 at 14:56

score 1 · Answer 3 · answered Jul 18 '16 at 15:02

1

The best approach is to configure DragOptions of jsPlumb.Defaults. You have to specify drag function:

jsPlumb.getInstance({
....,
DragOptions: {
  drag: function() {
  }
},
....
);

answered Jul 18 '16 at 15:02

Alena Kastsiukavets

812
6
9

score 0 · Answer 4 · answered Jul 21 '17 at 11:37

JsPlumb Version 2.1.4

jsPlumb.draggable("#yourElement", {
  drag: function (event) {
    console.log(event.pos[0]); // for left position
    console.log(event.pos[1]); // for top position
  }
);

Or

jsPlumb.draggable("#yourElement", {
  drag: function (event) {
    $(event.el).position().left; // for left position
    $(event.el).position().top; // for top position
  }
);

Extend jsplumb.draggable drag behavior

4 Answers4

Linked