使用拖动和调整大小的jsPlumb问题答案

【问题标题】：jsPlumb issue using drag and resize使用拖动和调整大小的jsPlumb问题
【发布时间】：2015-07-31 21:36:28
【问题描述】：

我在我的项目中使用 jsPlumb，基本上，它构建了一个流程图，用户可以在其中将形状从一个 div 拖放到另一个 (#frame)。

所以我希望某些形状可以调整大小，但我遇到了一些问题，因为当我尝试调整形状大小时，它的移动就像我在拖动一样。

我在 resize 事件中使用了 jsPlumb.repaint，但还是一团糟。

/**
 * 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);
            }
        }
    });
});

【问题讨论】：

我刚刚删除了 make_resizable 的 jsPlumb.draggable() 并开始工作了！
请发表您的评论作为答案并接受它。

标签： jquery drag-and-drop resize jsplumb

【解决方案1】：

仅供参考，我遇到了类似的问题。事实证明（并且由问题下的一位 cmets 指出），您应该不将全局 jsPlumb 与实例混合。相反，您应该尽可能使用 jsPlumb 的实例（在上面的示例中，它被命名为 elem）。

这是基于开发者的 (sportritt) cmets 这里：https://github.com/sporritt/jsPlumb/issues/387#issuecomment-185099198

他们正在考虑在 2.1.0 中删除全局 jsPlumb，以消除在混合两个不同实例且无法正常工作的情况下出现的混乱。

【讨论】：

【解决方案2】：

对于较新版本的 JsPlumb，该错误仍然存在。在这种情况下，只需使用拖动选项中的过滤选项即可。

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

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

【讨论】：