jQuery - utilizzo di tela per disegnare le linee tra i div

Question

devo n <div> s, ognuno con <h1> titolo e <ul> elenco di elementi in

Vorrei galleggiare questi sopra una tela e disegnare linee da <div id="x". > lista articolo y a <div id="z">. Sto usando l'interfaccia utente di jQuery per rendere trascinabile il file di <div.

L'elemento canvas è parzialmente in fondo alla pagina (un paragrafo di testo e alcuni elementi del modulo precedono) ma è possibile modificarlo se necessario.

[modifica]

ho taggato la questione con il grafico, ma permettetemi di aggiungere questo link: Graph_(mathematics) :-)

Answer 1

vorrei fare il posizionamento del div di assoluta e quindi impostare loro dove si desidera. Quindi ottenere la loro posizione con questa funzione:

//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}; 
} 

Quando si ha la loro posizione, aggiungerlo alla metà della loro larghezza/altezza, e si avrà la posizione del loro centro sulla pagina. Ora trova la posizione della tela e la sottragga dai numeri trovati in precedenza. Se si disegna una linea tra questi due punti, dovrebbe collegare i due div. Nel caso in cui non è chiaro, ecco come avrei codificarlo:

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 

EDIT Tra l'altro, utilizzando le findPos funzione è possibile anche impostare la posizione iniziale dei div relativamente alla tela (qui a (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";