Jquery 使用拖动和调整大小解决jsPlumb问题
我在我的项目中使用jsPlumb,它基本上是构建一个流程图,用户可以在其中将一个形状从一个div拖放到另一个div(#frame) 所以我希望某些形状可以调整大小,但我遇到了一些问题,因为当我尝试调整形状大小时,它的移动就像我在拖动一样 我在resize事件中使用了jsPlumb.repaint,但仍然很混乱Jquery 使用拖动和调整大小解决jsPlumb问题,jquery,drag-and-drop,resize,jsplumb,Jquery,Drag And Drop,Resize,Jsplumb,我在我的项目中使用jsPlumb,它基本上是构建一个流程图,用户可以在其中将一个形状从一个div拖放到另一个div(#frame) 所以我希望某些形状可以调整大小,但我遇到了一些问题,因为当我尝试调整形状大小时,它的移动就像我在拖动一样 我在resize事件中使用了jsPlumb.repaint,但仍然很混乱 /** * Enable element to be resizable at the div '#frame'. * Set a new ID to the element *
/**
* 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);
}
}
});
});
仅供参考,我也有类似的问题。事实证明(问题下的一条评论指出),您不应该将全局jsPlumb与实例混合使用。相反,您应该尽可能地使用jsPlumb的实例(在上面的示例中,它被命名为elem) 这是基于开发商(sporritt)的评论:
他们正在考虑删除2.1.0中的全局jsPlumb,以消除在这样的情况下的混淆,即您混合了两个不同的实例,但它无法正常工作。对于较新版本的jsPlumb,错误仍然存在。在这种情况下,只需使用“拖动选项”中的“过滤器”选项
instance.draggable((element), {
filter: ".ui-resizable-handle"
});
我刚刚在make_resizable上删除了jsPlumb.draggable()并开始工作!请将您的评论作为答案发布并接受。