Как подключить divgable divs

Question

У меня есть некоторые div, которые я клонировал и могу перетащить в область, теперь, я хочу подключить по линиям divs, и если я перемещаю divs, эти строки тоже должны двигаться. Что-то вроде блок-схемы, я клонирую divs с помощью перетаскивания, но все равно не знаю, как это сделать.

Спасибо!

Answer 1

Я думал об этом раньше, но мне никогда не приходилось пытаться его реализовать. Попробуйте следующее:

Создайте прозрачный GIF или PNG, который имеет диагональную линию, идущую от одного угла к другому. Когда вы перетаскиваете divs вокруг, растяните изображение так, чтобы его углы всегда касались каждого div. Вам, вероятно, понадобится изображение с диагональю и изображение с диагональю и переключение между ними на основе относительного расположения двух разделов.

Это, вероятно, потребует некоторой утонченности, чтобы заставить его работать хорошо, но это лучшее, что я могу придумать, чтобы получить диагональные строки в HTML.

Answer 2

• взять две дивы, Diva и DIVB.

• вычислить кратчайшее расстояние между ближайшими границами дивы

• определить средние координаты этих ближайших сторон каждого сНу например:

  А: {х: 10, у: 10}

  в: {х: 20: Y: 10}

• определить точку пересечения линий от этих точек (с) с = AX, BY или AY, BX (висимость динь на Diva и позиции DIVB)

• создать две дивы, которые представляют собой AC и BC

совет:

position:absolute; 
line-height:1px; 
border:solid 1px; 

перекрашивать каждый раз, когда вы перемещаете дивы с JQuery.

примечание: как вы можете видеть, всегда есть две стороны и две стороны далеко, когда divs не параллельны.

Answer 3

Вы можете использовать библиотеку jsplumb для достижения этой цели. если у вас есть два divs, div1 и div2,

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions); 
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions); 
jsPlumb.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
    connector: [ "Bezier", 175 ], 
    paintStyle:{ lineWidth:5, strokeStyle:'red' } 
}); 

это должно установить разъемы. если ваши дивы являются движимыми, тем OnMove, сделать вызов jsPlumb.repaint()

Ссылка на jsPlumb демо - https://jsplumbtoolkit.com Jsplumb, кажется, стали в настоящее время уделяется, (пересмотренная ссылка выше). Однако у них есть Community Edition

Community Edition Это с открытым исходным кодом jsPlumb проект размещен на GitHub, который был впервые создан в начале 2010 года.Это технология уровня представления, которая предоставляет вам API для установления связи между элементами DOM, как программно, так и с помощью событий mouse/touch.

Community Edition является бесплатным и имеет лицензию MIT или GPL2; вы выбираете то, что вам подходит.

Toolkit издание Инструментарий Издание завершает издание сообщества с акцентом на модели данных, а также несколько полезных функций пользовательского интерфейса, такие как макеты, а также виджет, который предлагает функции панорамирования/масштабирования. Он обеспечивает быстрый способ создания приложений с визуальной связью по своему ядру. Чтобы лучше понять возможности пакета Toolkit Edition, просмотрите некоторые демо или просмотрите документацию.

The Toolkit Edition имеет коммерческую лицензию на разработчика, предоставляющую дополнительный доступ к поддержке по электронной почте (плюс обновления к новым выпущенным версиям в течение года). Условия лицензии доступны здесь. Не стесняйтесь входить и покупать лицензию прямо сейчас, используя эту форму!

Дорожные карты для обоих изданий можно посмотреть here.