Extend Jsplumb.draggable Drag Behavior

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 pre

Solution 1:

In Version 1.6.3 the following Code works:

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

Solution 2:

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 codevar 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"));

Solution 3:

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

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

Solution 4:

JsPlumb Version 2.1.4

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

Or

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