jQuery - Einsatz Leinwand Linien zwischen divs zu ziehen

Question

Ich habe n <div> s, jeweils mit <h1> title und <ul> Liste der Elemente in

Ich mag würde diese über eine Leinwand schweben und ziehen Linien von <div id="x". > Listenpunkt y bis <div id="z">. Ich verwende jQuery UI, um die <div> s ziehbar zu machen.

Das canvas-Element ist ein Stück weiter unten auf der Seite (ein Textabsatz und einige Formularelemente stehen davor), aber ich kann das ändern, wenn es nötig ist.

[Bearbeiten]

ich die Frage mit Grafik markiert, aber lassen Sie mich diesen Link hinzufügen: Graph_(mathematics) :-)

Answer 1

Ich würde die div Positionierung auf absolute machen und sie dann festgelegt, wo Sie wollen. erhalten dann ihre Position mit dieser Funktion:

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

Wenn Sie ihre Position haben, fügen Sie es auf die Hälfte ihrer Breite/Höhe, und Sie werden die Position ihrer Mitte auf der Seite haben. Finde nun die Position der Leinwand und subtrahiere sie von den zuvor gefundenen Zahlen. Wenn Sie eine Linie zwischen diesen beiden Punkten zeichnen, sollte sie die zwei Divs verbinden. Für den Fall, es ist nicht klar, hier ist, wie ich es Code würde:

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 By the way, mit der findPos funktionieren Sie auch die Ausgangsposition der divs relativ auf die Leinwand einstellen (hier bei (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";