Draw Linie zwischen zwei divs mit jQuery DOM Linie

Question

Ich mag eine gerade Linie zwischen zwei divs ziehen und fand jQuery DOM line, das ist ein viel kleiner, einfacher Ansatz zu sein scheint als jsPlump.

Ich möchte es in meinen Code integrieren, aber es funktioniert nicht. Hier ist mein sehr einfaches Beispiel:

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

Wie die Dokumente sagen mir zu tun. Während die Konsole keine Fehler zeigt, zeigt sich die Zeile selbst nicht. Wo ist mein Fehler?

CODEPEN DEMO

Answer 1

diesen Arbeits Code Versuchen: demo

Eigentlich Problem ist $ .line gewünschtes Objekt mit x- und y-Wert als Parameter und in obiger Frage geht es html-Element in $ .line Funktion. Es hat also nicht funktioniert. Also habe ich es korrigiert.

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');