使用 jQuery DOM 线在两个 div 之间画线

Question

我想在两个 div 之间画一条直线，发现jQuery DOM line ，这似乎是比jsPlump更小、更简单的方法。

我想将它集成到我的代码中，但它不起作用。 这是我非常基本的例子：

var fromPoint = $('#first');
var toPoint = $('#second');
$.line(fromPoint, toPoint);

正如文档告诉我的那样。 虽然控制台没有显示任何错误，但该行也不会显示自己。 我的错在哪里？

代码笔演示

Answer 1

试试这个工作代码：演示

实际上问题是 $.line 需要的对象，x 和 y 值作为参数，在上面的问题中，它在 $.line 函数中传递 html 元素。 所以它不起作用。 所以我已经更正了。

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

var fromPoint = getOffset($('#first')[0]);
var toPoint = getOffset($('#second')[0]);

var from = function () {},
to = new String('to');
from.y = fromPoint.top+10;
from.x = fromPoint.left+10;
to.y = toPoint.top+10; 
to.x = toPoint.left+10;

$.line(from, to);

console.log('All scripts runned');