我有两个div，一个包含draggable div，另一个div接受drop：
HTML
<div class="divContainer">
<div class="dragMe header active" id="header">
Header
</div>
<div class="dragMe source ui-state-disabled" id="source" >
Source
</div>
<div class="dragMe target ui-state-disabled" id="target" >
Target
</div>
<div class="dragMe fields ui-state-disabled " id="fields" >
Fields Selection
</div>
<div class="dragMe options ui-state-disabled " id="options" ">Additional Options</div>
<div class="dragMe summary ui-state-disabled" id="summary" >
Summary
</div>
</div>
和容器就像
<div class="divDropzone ">
</div>
现在，我可以拖放divDropZone，并且能够在它们之间绘制一条线jsplumb。
Jquery代码：
$(".divDropzone").droppable({
drop: function (event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
var dropElem = ui.draggable.attr('id');
$(".divContainer #" + dropElem).draggable({
disabled: true,
cursor: "none"
}).removeClass('active');
if ($.inArray(dropElem, nodes) < 0)
{
dropId = dropElem + '_dropped';
nodes.push(dropId);
if (items.length == 0) {
items[0] = dropId;
items[1] = null;
}
else {
items[1] = items[0];
items[0] = dropId;
}
}
$(this).find("div." + dropElem).attr("id", dropId);
$(".divDropzone #" + dropId).draggable({
containment: "parent",
}).removeClass('active');
if (dropElem == "header") {
}
else if (dropElem == "source") {
connect("header_dropped","source_dropped");
}
else if (dropElem == "target") {
connect("source_dropped","target_dropped");
}
else if (dropElem == "fields") {
connect("target_dropped","fields_dropped");
}
else if (dropElem == "options") {
connect("fields_dropped","options_dropped");
}
else if (dropElem == "summary") {
connect("options_dropped","summary_dropped");
}
}
});
和jsplumb代码是......
function jspsample(source, target) {
//jsPlumb.repaintEverything();
jsPlumb.ready(function () {
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", { radius: 2 }],
Connector: "StateMachine",
HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}],
//[ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
],
Container: "divDropzone"
});
instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" });
window.jsp = instance;
var windows = jsPlumb.getSelector(".divDropzone .dragMe");
var initNode = function (el) {
instance.draggable(el);
instance.makeSource(el, {
filter: ".ep",
anchor: "Continuous",
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
connectionType: "basic",
extract: {
"action": "the-action"
},
maxConnections: 2,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
instance.makeTarget(el, {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: false
});
instance.fire("jsPlumbDemoNodeAdded", el);
};
instance.batch(function () {
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
}
var cssClass=source+"_"+target;
instance.connect({
source: source,
target: target,
type: "basic",
cssClass: cssClass
});
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
}
代码运行良好。箭头在下降时绑定。但问题是当我在divDropZone中拖动丢弃的div时，所有连接都不跟随拖动元素。只有Target端点才移动而不是源端点....
我已尽力而为但却毫无用处......
我该如何解决这个问题？
答案 0 :(得分：0)
由myslelf解决了......
代码就像
var instance = [];
var initNode;
jsPlumb.ready(function () {
instance = jsPlumb.getInstance({
Endpoint: ["Dot", { radius: 2 }],
Connector: "StateMachine",
HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}],
["Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
],
Container: "divDropzone"
});
instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" });
window.jsp = instance;
//windows = jsPlumb.getSelector(".divDropzone .dragMe");
initNode = function (el) {
// initialise draggable elements.
instance.draggable(el);
// instance.draggable(source);
instance.makeSource(el, {
filter: ".ep",
anchor: "Continuous",
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
connectionType: "basic",
extract: {
"action": "the-action"
},
maxConnections: 2,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
instance.makeTarget(el, {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: false
});
instance.fire("jsPlumbDemoNodeAdded", el);
};
});
$(function () {
$("#header").draggable({
helper: "clone",
revert: "invalid",
appendTo: ".divDropzone",
distance: 50,
//addClasses: false
});
$("#source,#target,#fields,#options,#summary,#field").draggable({
disabled: true,
});
var nodes = [];
var dropId;
//drop zone
$(".divDropzone").droppable({
drop: function (event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
var dropElem = ui.draggable.attr('id');
if ($.inArray(dropElem, nodes) < 0) {
dropId = dropElem + '_dropped';
nodes.push(dropId);
}
$(this).find("div." + dropElem).attr("id", dropId);
$(".divDropzone #" + dropId).draggable({
containment: "parent",
});
if (dropElem == "header") {
//var windows = jsPlumb.getSelector(".divDropzone .dragMe");
//initNode('header_dropped', true);
}
else if (dropElem == "source") {
adterDrop('target');
}
else if (dropElem == "target") {
jsPlumb.repaintEverything();
var windows = jsPlumb.getSelector(".divDropzone .dragMe");
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
instance.batch(function () {
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
}
instance.connect({
source: "source_dropped",
target: "target_dropped",
type: "basic"
});
});
}
else if (dropElem == "fields") {
jsPlumb.repaintEverything();
var windows = jsPlumb.getSelector(".divDropzone .dragMe");
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
instance.batch(function () {
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
}
instance.connect({
source: "target_dropped",
target: "fields_dropped",
type: "basic"
});
});
}
}
});