jQuery - uso lienzo para dibujar líneas entre divs

Question

tengo n <div> s, cada uno con <h1> título y <ul> lista de elementos en

me gustaría flotar éstos sobre un lienzo y dibujar líneas de <div id="x". > enumera el elemento y a <div id="z">. Estoy usando jQuery UI para hacer que el <div> s sea arrastrable.

El elemento canvas está en la mitad de la página (un párrafo de texto y algunos elementos del formulario lo preceden) pero puedo cambiarlo si es necesario.

[editar]

Me tagged la cuestión con el gráfico, pero permítanme añadir este enlace: Graph_(mathematics) :-)

Answer 1

Me gustaría hacer el posicionamiento de la div a absoluta y luego los puso en la que desea. A continuación, obtener su posición con esta función:

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

Cuando usted tiene su posición, añadirlo a la mitad de su anchura/altura, y que tendrá la posición de su centro en la página. Ahora encuentra la posición del lienzo y sustrae de los números encontrados previamente. Si dibuja una línea entre esos dos puntos, debe vincular los dos divs. En caso de que no está claro, así es como me 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 

EDITAR Por cierto, el uso de los findPos funcionan también puede establecer la posición inicial de los divs relativamente a la lona (aquí en (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";