Cómo conectar divisores arrastrables

Question

Tengo algunos divs que clono y puedo arrastrar y soltar en un área, ahora, quiero conectar por líneas los divs y si muevo los divs, estas líneas deben moverse también. Algo así como un diagrama de flujo, clono los divs usando arrastrar y soltar, pero todavía no sé cómo hacer estas líneas.

Gracias!

Answer 1

He pensado en esto antes, pero nunca tuve la necesidad de intentar implementarlo. Intente esto:

Cree un GIF transparente o PNG que tenga una línea diagonal que se ejecuta de una esquina a otra. A medida que arrastre los divs, estire la imagen para que sus esquinas toquen siempre cada div. Es probable que necesite una imagen en diagonal hacia abajo y una imagen en diagonal hacia arriba y cambiar entre los dos en función de la posición relativa de los dos divs.

Esto probablemente requerirá cierta delicadeza para que funcione bien, pero es lo mejor que se me ocurre para obtener líneas diagonales en HTML.

Answer 2

• tomar dos divs, diva y divB.

• calcular la distancia más corta entre los bordes más cercanos de la divs

• determinar las coordenadas medias de los lados más próximos de cada div por ejemplo:

  A: {x: 10, y: 10}

  B: {x: 20: y: 10}

• determinar la intersección de punto de las líneas de los puntos (C) C = AX, BY o AY, BX (Depen ding de diva y posiciones divB)

• crear dos divs, que representan AC y BC

consejo:

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

repintado cada vez que mueves los divs con jQuery.

nota: como puede ver, siempre hay 2 lados cerca y 2 lados lejos cuando los divs no son paralelos.

Answer 3

puede utilizar la biblioteca jsplumb para lograrlo. si tiene dos divs, div1 y 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' } 
}); 

esto debe establecer los conectores. si su divs son bienes muebles, a continuación, OnMove, hacer una llamada a jsPlumb.repaint()

Enlace a la demostración jsPlumb - https://jsplumbtoolkit.com Jsplumb parece haberse convertido ahora pagada, (enlace revisado más arriba). Sin embargo tienen un Community Edition

Community Edition Este es el proyecto de código abierto jsPlumb alojado en GitHub que fue creado por primera vez a principios de 2010.Es una tecnología de capa de vista que le proporciona una API para establecer la conectividad entre elementos DOM, tanto mediante programación como a través de eventos mouse/touch.

La Edición de la comunidad es gratuita y tiene licencia MIT o GPL2; usted elige el que más se ajuste a sus necesidades.

Kit de herramientas de edición El kit de herramientas de edición envuelve la edición de la comunidad con un enfoque en el modelo de datos subyacente, así como varias características útiles, tales como la interfaz de usuario diseños, y un widget que ofrece la funcionalidad de movimiento horizontal/zoom. Proporciona una forma rápida de crear aplicaciones con conectividad visual en su núcleo. Para tener una mejor idea de las capacidades de Toolkit Edition, eche un vistazo a algunas de las demostraciones o lea detenidamente la documentación.

The Toolkit Edition tiene una licencia comercial, por desarrollador, con acceso opcional a la asistencia por correo electrónico (más las actualizaciones de las nuevas versiones lanzadas durante un año). Los términos de la licencia están disponibles aquí. ¡Siéntete libre de entrar y comprar una licencia ahora mismo usando este formulario!

Roadmaps para ambas ediciones se pueden ver here.