Come collegare le immersioni trascinabili

Question

Ho alcune div che clonato e posso trascinare e rilasciare in un'area, ora, voglio collegare per linee i div e se muovo i div, anche queste linee devono muoversi. Qualcosa come un diagramma di flusso, io clonò i div usando il drag and drop, ma ancora non so come fare queste righe.

Grazie!

Answer 1

Ci ho pensato prima ma non ho mai avuto la necessità di provare effettivamente a implementarlo. Prova questo:

Creare un GIF o un PNG trasparente con una linea diagonale che va da un angolo all'altro. Mentre trascini i div intorno, allunga l'immagine in modo che gli angoli tocchino sempre ogni div. Probabilmente avrai bisogno di un'immagine diagonale-in-giù e un'immagine diagonale-in alto e cambierà tra i due in base al posizionamento relativo dei due div.

Probabilmente ci vorrà un po 'di tempo per farlo funzionare bene, ma è la cosa migliore che mi viene in mente per ottenere linee diagonali in HTML.

Answer 2

• prendere due div, Diva e divB.

• calcolare la distanza più breve tra i bordi più stretti del div

• determinare le coordinate centrali di quei lati più stretti di ciascuna div es:

  A: {x: 10, y: 10}

  B: {x: 20: y: 10}

• determinare l'intersezione punto di linee da tali punti (C) C = AX, AY da OR, BX (Depen ding su Diva e posizioni divB)

• creare due div, che rappresentano AC e BC

punta:

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

riverniciare ogni volta che si sposta il div con jQuery.

nota: come potete vedere, ci sono sempre 2 lati vicini e 2 lati lontani quando i div non sono paralleli.

Answer 3

è possibile utilizzare la libreria jsplumb per ottenere ciò. se si dispone di due div, div1 e 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' } 
}); 

questo dovrebbe stabilire i connettori. se il tuo div sono beni mobili, quindi OnMove, effettuare una chiamata a jsPlumb.repaint()

Link a jsPlumb demo - https://jsplumbtoolkit.com Jsplumb sembra essere diventato a pagamento ora, (link rivisto sopra). Tuttavia hanno un Community Edition

Community Edition Questo è il progetto jsPlumb open source ospitato su GitHub che è stato prima creato all'inizio del 2010.È una tecnologia a livello di vista che fornisce un'API per stabilire la connettività tra elementi DOM, sia a livello di codice che tramite eventi mouse/touch.

L'edizione Community è gratuita ed è dotata di licenza MIT o GPL2; scegli quello che si adatta alle tue esigenze.

Toolkit Edition Il Toolkit Edizione avvolge l'edizione Comunità con un focus sul modello di dati di base, così come diverse funzionalità dell'interfaccia utente utili come i layout, e un widget che offre funzionalità pan/zoom. Fornisce un modo rapido di creare applicazioni con connettività visiva al loro interno. Per avere un'idea migliore delle funzionalità dell'edizione Toolkit, dare un'occhiata ad alcune demo o consultare la documentazione.

La Toolkit Edition ha una licenza commerciale, per sviluppatore, con accesso opzionale al supporto via e-mail (più aggiornamenti alle nuove versioni rilasciate per un anno). I termini della licenza sono disponibili qui. Sentiti libero di entrare e comprare una licenza adesso usando questo modulo!

È possibile visualizzare le tabelle di marcia per entrambe le edizioni here.