Почему линия подключения отображается в Div в JSPlumb?

Это my JSFiddleПочему линия подключения отображается в Div в JSPlumb?

запросов - Когда я пытаюсь установить connnection между идентификаторами A1 и B соединение розовая линия показывает от Div B. Ниже розовая линия выделена отстоит от Div B. Это проблема

JQuery

//Setting up drop options 
var targetDropOptions = { 

}; 

connectorHoverStyle = { 
    lineWidth: 7, 
    strokeStyle: "#2e2aF8", 
    cursor: 'pointer' 
} 

//Setting up a Target endPoint 
var targetColor = "#316b31"; 
var targetEndpoint = { 
    anchor: "LeftMiddle", 
    endpoint: ["Dot", { radius: 8}], 
    paintStyle: { fillStyle: targetColor }, 
    //isSource: true, 
    scope: "green dot", 
    connectorStyle: { strokeStyle: targetColor, lineWidth: 8 }, 
    connector: ["Flowchart", { curviness: 63}], 
    maxConnections: -1, 
    isTarget: true, 
    dropOptions: targetDropOptions, 
    connectorHoverStyle: connectorHoverStyle 
}; 

//Setting up a Source endPoint 
var sourceColor = "#ff9696"; 
var sourceEndpoint = { 
    anchor: "RightMiddle", 
    endpoint: ["Dot", { radius: 8}], 
    paintStyle: { fillStyle: sourceColor }, 
    isSource: true, 
    scope: "green dot", 
    connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 }, 
    connector: ["Flowchart", { curviness: 63}], 
    maxConnections: -1, 
    //   isTarget: true, 
    dropOptions: targetDropOptions, 
    connectorHoverStyle: connectorHoverStyle 
}; 



jsPlumb.bind("ready", function() { 

    jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" }); 
    jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" }); 
    jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" }); 
    jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" }); 

    var window = jsPlumb.getSelector('.window'); 
    jsPlumb.addEndpoint(window, targetEndpoint); 
    jsPlumb.addEndpoint(window, sourceEndpoint); 
    jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint); 

    jsPlumb.draggable(window); 

    jsPlumb.importDefaults({ 
     ConnectionOverlays: [ 
      ["Arrow", { location: 0.8}], 
      ["Label", { 
       location: 0.5, 
       id: "label", 
       cssClass: "aLabel" 
      }] 
     ] 
    }); 
});

HTML

<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;"> 
    <strong>A</strong> 
    <div id="A1"> 
    </div> 
</div> 
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;"> 
    <strong>B</strong> 
</div> 
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;"> 
    <strong>C</strong> 
</div> 
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;"> 
    <strong>D</strong> 
</div>

источник

2013-02-27 Anonymous

вы должны добавить все импорт. поэтому мы можем избавиться от этого –

@joelharkes jsFiddle (который я не видел вначале) имеет каждую библиотеку, в которой он нуждается, он должен работать нормально ... –

@Pankajgarg хорошо, проблема в том, что конечные точки генерируются в div, что их «родители» ... в том, что ваша конечная точка может подключаться только к телу и даже не может понять, где находится ваша другая конечная точка.Я не знаю никакого решения вашей проблемы, но поместите '' в тело и поместите его с помощью css относительно диапазона, который должен быть рядом с .... –

Я хотел бы иметь несколько якорей на одном Div при условии ID должны быть атрибуты для этих якорей как-то.

Для этого. Сначала я удалил дополнительный div. Теперь предположим, что кто-то хочет отобразить два Source Anchors. Для этого я сделал изменения в jquery.jsPlumb-1.3.16-все-min.js файл

Ниже была оригинальной строки кода в этом файле

this.makeNode = function (E, D) { 
    return f("circle", { cx: E[2]/2, cy: E[3]/2, r: E[2]/2 
}

Модификация находится ниже. Теперь я добавляю атрибуты id каждому якорю (круг).

this.makeNode = function (E, D) { 
    var attr = $('#'+obj[0].endpoint.elementId).attr('actionID'); 
    return f("circle", { cx: E[2]/2, cy: E[3]/2, r: E[2]/2, id: attr 
}

Как я могу получить значение id?

В разделе Div, показанном выше в запросе, я добавил атрибут Действие и назначил некоторый идентификатор, который я хочу назначить. Как ниже

jsPlumb.getSelector('#first').attr('actionID', 'p1');

и, наконец, при добавлении в конечной точке

jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);

Аналогично, можно назначить как много различных анкеров в терминах идентификаторов столько, сколько требуется.

jsPlumb.getSelector('#first').attr('actionID', 'p3'); 
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);

Как вы будете присваивать идентификатор источника и целевой идентификатор на подключение?

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) { 
    if (CurrentConnection.connection.targetId == 
            CurrentConnection.connection.sourceId) 
     jsPlumb.detach(CurrentConnection.connection); 
    else { 
     var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id; 
     init(CurrentConnection.connection, obj); 
    } 
}); 

init = function (connection, CircleID) { 
    connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId); 
};

Надеется, что это будет полезно для тех пользователей, с которыми сталкиваются тем же вопрос ...

источник

2013-02-27 18:41:02

Почему линия подключения отображается в Div в JSPlumb?

ответ

Смежные вопросы