jQuery - используйте canvas для рисования линий между div

У меня есть н<div& gt; s, каждый с<h1& GT; название и<ul& GT; список предметов в.

Я хотел бы плавать над холстом и рисовать линии из<div id="x"& GT; элемент списка у<div id="z"& GT ;. Я использую JQuery UI, чтобы сделать<div& Dragable.

Элемент canvas находится частично вниз по странице (перед ним стоит абзац текста и некоторые элементы формы), но я могу изменить это при необходимости.

[редактировать]

Я пометил вопрос с графиком, но позвольте мне добавить эту ссылку:Graph_ (математика) :-)

Ответы на вопрос(1)

а затем установил их там, где вы хотите. Затем получите их позицию с помощью этой функции:

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

Когда у вас есть их положение, добавьте его к половине их ширины / высоты, и у вас будет положение их центра на странице. Теперь найдите положение холста и вычтите его из ранее найденных чисел. Если вы проведете линию между этими двумя точками, она должна связать два элемента div. В случае, если неясно, вот как я мог бы закодировать это:

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 Кстати, с помощью функции findPos вы также можете установить начальную позицию div относительно холста (здесь, в (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";

Ваш ответ на вопрос