Dessinez des lignes pour relier les divs

J'ai actuellement cette configuration: http://sandbox.brightboxstudios.com/orgmap/

Ils sont déplaçables et je suis en train d'essayer de trouver un moyen d'avoir des lignes de connecter entre eux, même lorsqu'ils sont déplacés. Avoir un moyen facile de montrer comment chacune est liée et qui doit être connectée est l'idéal!

Merci!!!

InformationsquelleAutor Reuben | 2012-08-21
  1. 3

    Vous devriez envisager d'utiliser la D3.js bibliothèque. En particulier, cet exemple est ce que je pense que vous êtes à la recherche pour: http://mbostock.github.com/d3/ex/force.html

    • Ce qui semble sorte au-delà de ce que je suis à la recherche d' :/ même Pas vraiment sûr de savoir comment l'intégrer.. Merci 🙂
    InformationsquelleAutor Glenn Dayton
  2. 2

    Prendre un coup d'oeil à ceci: jQuery - utiliser de la toile de tracer des lignes entre les divs

    Je commencerais avec ce code, et viens de re-dessiner les lignes à chaque fois que la divs changement d'emplacement.

    • comment fonctionne le rafraîchissement de travail?
    • eh bien, j'ai juste regardé et il semble que le redessiner fonctionne en appelant redrawCanvas() en javascript
    • Désolé, comment puis-je mettre en œuvre cette commande? Encore à apprendre 🙂 Merci!!
    • Vous voulez sans doute de lire cette page sur les événements. Il doit expliquer comment exécuter du code javascript quand quelque chose se passe dans le navigateur. Je ne suis pas sûr exactement de quel événement que vous souhaitez utiliser si...
    • J'ai trouvé l'événement glisser sous jQuery déplaçable, mais ne savez pas comment l'intégrer dans le code que vous avez lié à votre réponse.. docs.jquery.com/UI/Draggable#event-drag
    • essayez $( "canvas" ).bind( "drag", function(event, ui) { redrawCanvas(); }); N'oubliez pas d'inclure la librairie jQuery, et si vous avez plus d'une toile sur la page, changer le "canvas" à quelque chose de plus spécifique, c'est à dire: "canvas#linecanvas", qui correspond à tous les toiles avec un ID de "linecanvas"

    InformationsquelleAutor Kevin Johnson
  3. 1

    Vous pouvez essayer KineticJS trop. Je pense qu'il va fournir ce que vous voulez facilement. http://www.kineticjs.com/

    Ici vous pouvez trouver beaucoup de tutoriels: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

    • J'ai vu ça, mais ne pouvait pas comprendre les lignes qui relient encore.. des idées?
    • Pensez-vous, est-ce une bonne idée d'utiliser n'est plus maintenu les bibliothèques? 🙂
    InformationsquelleAutor davidbuzatto
  4. 1

    Vous pouvez également essayer jsPlumb, une bibliothèque JavaScript qui peuvent se connecte divs ensemble. C'est vraiment simple à utiliser et il y a beaucoup de démos sur cette page.

    • Le lien ne fonctionne pas
    InformationsquelleAutor tforrest