JQuery – utilisez une toile pour dessiner des lignes entre divs

J'ai n <div > s, chacun avec <h1 > titre et <ul > liste d'éléments dans.

Je voudrais les flotter sur une toile et dessiner des lignes de <div id="x" > liste d'élément y à <div id="z" >. J'utilise jQuery UI pour faire le <div > s draggable.

L'élément en toile est partiellement descendu dans la page (un paragraphe de texte et certains éléments de forme le précèdent) mais je peux le modifier si nécessaire.

[modifier]

J'ai marqué la question avec le graphique, mais permettez-moi d'ajouter ce lien: Graph_ (mathématiques) 🙂

Je ferais le positionnement de la division à l'absolu, puis je les placerais là où vous voulez. Ensuite, obtenez leur position avec cette fonction:

 //Get the absolute position of a DOM object on a page function findPos(obj) { var curLeft = curTop = 0; if (obj.offsetParent) { do { curLeft += obj.offsetLeft; curTop += obj.offsetTop; } while (obj = obj.offsetParent); } return {x:curLeft, y:curTop}; }

Lorsque vous avez leur position, ajoutez-le à la moitié de leur largeur / hauteur, et vous aurez la position de leur centre sur la page. Trouvez maintenant la position de la toile et soustrayez-la des nombres trouvés précédemment. Si vous tracez une ligne entre ces deux points, il devrait lier les deux divs. Dans le cas où ce n'est pas clair, voici comment je le codifierai:

 var centerX = findPos(document.getElementById('x')); centerX.x += document.getElementById('x').style.width; centerX.y += document.getElementById('x').style.height; var centerZ = findPos(document.getElementById('Z')); centerZ.x += document.getElementById('z').style.width; centerZ.y += document.getElementById('z').style.height; //Now you've got both centers in reference to the page var canvasPos = findPos(document.getElementById('canvas')); centerX.x -= canvasPos.x; centerX.y -= canvasPos.y; centerZ.x -= canvasPos.x; centerZ.y -= canvasPos.y; //Now both points are in reference to the canvas var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.moveTo(centerX.x, centerX.y); ctx.lineTo(centerZ.x, centerZ.y); ctx.stroke(); //Now you should have a line between both divs. You should call this code each time the position changes

EDITER En passant, en utilisant la fonction FindPos, vous pouvez également définir la position initiale des divs par rapport à la toile (ici à (30; 40)):

 var position = {x: 30, y: 40}; var canvasPos = findPos(document.getElementById('canvas')); var xPos = canvasPos.x + position.x; var yPos = canvasPos.y + position.y; document.getElementById('x').style.left = xPos+"px"; document.getElementById('x').style.top = yPos+"px";