Jim Crozier Jim Crozier - 4 months ago 15
jQuery Question

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 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.

Answer

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

Comments