Dibuja una línea de conexión entre dos elementos.

Solución:

jsPlumb es una opción disponible que admite arrastrar y soltar, como se ve en sus numerosas demostraciones, incluida la demostración del diagrama de flujo.

Está disponible en una edición comunitaria gratuita y una edición de kit de herramientas de pago.

La edición Toolkit envuelve la edición Community con una capa de enlace de datos integral, así como varios widgets de interfaz de usuario para crear aplicaciones e integraciones para bibliotecas populares, y tiene licencia comercial.

Unir líneas con svgs valió la pena para mí, y funcionó perfectamente … en primer lugar, Scalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. Las imágenes SVG y sus comportamientos se definen en archivos de texto XML. puedes crear un svg en HTML usando <svg> etiqueta. Adobe Illustrator es uno de los mejores programas utilizados para crear svgs complejos utilizando rutas.

Procedimiento para unir dos divs usando una línea:

1. crea dos divs y dales la posición que necesites

   <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
   <div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
   

   (en aras de la explicación, estoy haciendo un estilo en línea, pero siempre es bueno crear un archivo css separado para el estilo)

2. <svg><line id="line1"/></svg>

   La etiqueta de línea nos permite dibujar una línea entre dos puntos especificados (x1, y1) y (x2, y2). (para una referencia, visite w3schools). Aún no los hemos especificado. porque usaremos jQuery para editar los atributos (x1, y1, x2, y2) de la etiqueta de línea.

3. en <script> escritura de etiqueta

   line1 = $('#line1');   
   div1 = $('#div1');   
   div2 = $('#div2');
   

   Usé selectores para seleccionar los dos divs y la línea …

   var pos1 = div1.position();
   var pos2 = div2.position();
   

   jQuery position() El método nos permite obtener la posición actual de un elemento. Para obtener más información, visite https://api.jquery.com/position/ (puede usar offset() método también)

Ahora que hemos obtenido todas las posiciones que necesitamos, podemos trazar la línea de la siguiente manera …

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

jQuery .attr() El método se utiliza para cambiar los atributos del elemento seleccionado.

Todo lo que hicimos en la línea anterior es cambiar los atributos de la línea de

x1 = 0
y1 = 0
x2 = 0
y2 = 0

para

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

como position() devuelve dos valores, uno ‘left’ y otro ‘top’, podemos acceder fácilmente a ellos usando .top y .left usando los objetos (aquí pos1 y pos2) …

Ahora la etiqueta de línea tiene dos coordenadas distintas para trazar una línea entre dos puntos.

Consejo: agregue detectores de eventos según necesite para divs

Consejo: asegúrese de importar la biblioteca jQuery primero antes de escribir cualquier cosa en la etiqueta del script

Después agregando coordenadas a través de JQuery … Se verá algo así

El siguiente fragmento es solo para fines de demostración, siga los pasos anteriores para obtener la solución correcta

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>

Recientemente, intenté desarrollar una aplicación web simple que usa componentes de arrastrar y soltar y tiene líneas que los conectan. Me encontré con estas dos bibliotecas de JavaScript simples y sorprendentes:

1. Plain Draggable: biblioteca simple y de alto rendimiento que permite arrastrar elementos HTML / SVG.
2. Línea guía: dibuje una línea guía en su página web

Enlace de ejemplo de trabajo (uso: haga clic en agregar escena para crear un arrastrable, haga clic en agregar opción para dibujar una línea guía entre dos elementos de arrastre diferentes)

---

---

Utiliza Nuestro Buscador