jsPlumb issue using drag and resize

Question

I'm using jsPlumb in my project that, basically, build a flowchart, where user can drag and drop a shape from one div to another (#frame).

So I want that some shapes are resizable, but I'm having some problems, because when I try to resize the shape, it moves like I was dragging too.

I used the jsPlumb.repaint at the resize event, but still messed.

/**
 * Enable element to be resizable at the div '#frame'.
 * Set a new ID to the element
 *
 * @param {Object} elem
 */
function make_resizable(elem) {
    count_id++;

    var id_name = "production_" + count_id; // build a new id 
    elem.attr("id", id_name);

    $("#frame").append(elem);

    elem.resizable({
        resize: function(event, ui) {
          jsPlumb.repaint(ui.helper);
        },
        handles: "all"
    });

    jsPlumb.draggable(elem, {
        containment: "parent"
    });
}

function make_draggable(elem) {
    elem.removeClass("drag").addClass("draggable onFrame");

    elem.attr("visible", "true");
    elem.draggable({
        containment: 'parent',
    });
}

$(document).ready(function(){
    $(".drag").draggable({
        revert: "invalid",
        helper: 'clone',
        cursor: "move",
        containment: 'frame'
    });

    $("#frame").droppable({
        accept: ".drag",
        drop: function(event, ui) {
            var cloned = $(ui.helper).clone();

            if ( $(ui.helper).parent("#frame").length == 0 ) {
                var pos = $(ui.helper).offset();
                var draggableOffset = ui.helper.offset(),
                    droppableOffset = $(this).offset(),
                    left = draggableOffset.left - droppableOffset.left,
                    thisTop = draggableOffset.top - droppableOffset.top;

                cloned.css({
                    "left": left,
                    "top": thisTop
                });

                if ( cloned.hasClass("production-unit")) {
                    make_resizable(cloned);
                    //cloned.css("z-index", zIndex_unit++);
                } else {
                    make_connectable(cloned);
                    //cloned.css("z-index", zIndex_elem++);
                }

                make_draggable(cloned);
            }
        }
    });
});

Answer 1

FYI, I had a similar issue. As it turns out (and was indicated by one of the comments under the question), you should not mix the global jsPlumb with instances. Rather, you should use an instance of jsPlumb (in the example above, it was named elem) wherever you can.

This is based on the developer's (sporritt) comments here: https://github.com/sporritt/jsPlumb/issues/387#issuecomment-185099198

They are considering removing the global jsPlumb in 2.1.0 to remove confusion in cases like this where you mix two different instances and it doesn't work properly.

Answer 2

For the newer versions of JsPlumb the bug persists. In this case, just use the filter option in the drag options.

instance.draggable((element), {
   filter: ".ui-resizable-handle"
});

https://github.com/jsplumb/katavorio/wiki#filtering