Избегайте наложения соединений и элементов в jsPlumb

Я использую jsPlumb для создания связи между элементами на странице, и у меня неприятности из-за того, что созданные соединения перекрывают некоторые элементы на сайте.

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

Я изменил свойство z-index наложенных элементов, и за ними появилось соединение.

введите здесь описание изображения

Однако то, что я ищу, - это создать соединение таким образом, чтобы оно не проходило через эти элементы на моем сайте.

Я ищу что-то вроде этого:

введите здесь описание изображения

Возможно ли это с jsPlumb? Спасибо.


javascript plugins jquery jsplumb
person Alvaro    schedule 07.04.2014    source источник
comment
Можете ли вы воспроизвести свой код в jsFiddle?   -  person MrNobody007    schedule 07.04.2014
comment
@PruthviBharadwaj вот оно: jsfiddle.net/S7Mk6/1   -  person Alvaro    schedule 07.04.2014
comment
@PruthviBharadwaj Не могли бы вы проверить jsFiddle? это не работает. Заранее спасибо.   -  person Aditya Peshave    schedule 18.03.2015
comment
@ADi Обновленный ответ со ссылкой на FIddle.   -  person MrNobody007    schedule 25.03.2015
comment
@PruthviBharadwaj Понял. работает как шарм !! Благодарность   -  person Aditya Peshave    schedule 25.03.2015
comment
@PruthviBharadwaj Вы знаете, как заставить стрелки работать?? Я хочу, чтобы интерфейс был таким. jsfiddle.net/qn1rjrj9. Не могли бы вы обновить свою ссылку со стреловидной структурой. Я много пробовал, но это не приходит.   -  person Aditya Peshave    schedule 01.04.2015
comment
@PruthviBharadwaj скрипка не работает, можете ли вы снова обновить скрипку, пожалуйста   -  person dom    schedule 24.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

Да, это возможно с опцией anchor (ИСТОЧНИК). Для вашего требования установите anchor:Top. Пример:

jsPlumb.connect({...., anchor:"Top", ... });

JsFiddle

person MrNobody007    schedule 07.04.2014
comment
Якоря генерируются динамически, поэтому я не могу предсказать, как должно выглядеть соединение и где соединения должны соединять каждую коробку. - person Alvaro; 07.04.2014
comment
Вот оно: jsfiddle.net/S7Mk6/1 У меня тоже проблемы со стрелкой, (наложение), но это уже другая тема. - person Alvaro; 07.04.2014
comment
@Alvaro Итак, как вы позиционируете свои элементы? Я думаю, вам нужно работать над положением элементов в этом случае! - person MrNobody007; 07.04.2014
comment
Элементы статичны. Определяется CSS. Соединения между ними будут динамически определяться пользователем в файле конфигурации. (определение пункта отправления и назначения) - person Alvaro; 07.04.2014
comment
@Alvaro Вы не можете изменить путь соединений в jsPlumb, поэтому вам нужно позаботиться о начальном положении элементов. Попробуйте использовать разные коннекторы, экспериментируя со значением stub. - person MrNobody007; 07.04.2014

arrow_upward
0
arrow_downward

Вы можете добавить точки соединения между элементом, чтобы получить лучший контроль над путем соединения (хотя это все равно потребует обработки логики позиционирования этих точек). Вот пример:

ConnectBoxes($("#box1"), $("#box3"));

function ConnectBoxes(sourceDiv, targetDiv) {
    var connectionPointTop = targetDiv.position().top + targetDiv.height() / 2;
    var connectionPointLeft = sourceDiv.position().left + sourceDiv.width() / 2
     var connectionPoint1 = AddConnectionPoint("connectionPoint1", connectionPointTop, connectionPointLeft);
    jsPlumb.connect($.extend({
    source: 'box1',
    target: 'connectionPoint1',
}, options));
    jsPlumb.connect($.extend({
    source: 'connectionPoint1',
    target: 'box3',
}, options));
}


function AddConnectionPoint(divID, top, left) {
    var connectionPoint = $("<div></div>").attr({id: divID}).addClass("ConnectionPoint").css({"left": left + "px", "top": top + "px"});
    $("#divMain").append(connectionPoint);
    return connectionPoint;
}

div.ConnectionPoint {
    border: 3px solid #F00;
    position: absolute;
    width: 0px;
    height: 0px;
}
person Amit    schedule 07.04.2014