jQuery在on载时Divs Divs之间的线条线

Question

演示线

基本上，我正在使用多个元素进行此操作。使用相同的代码。

我希望在加载页面时将行元素元素元素元素到draw。目前，我需要移动DIV（两次？）才能运行脚本。

JavaScript非常新。就我熟悉的术语而言，已经搜索了！
任何指示都赞赏。

编辑：

如果我对此进行了修改： 创建：函数（event，ui）{加载时显示的线显示。但是，当Divs移动时，线路不会遵循。

谢谢！

var boxCenterXOffset = 50;
var boxCenterYOffset = 50;
var boxCenterZOffset = 50;

$(document).ready(function(){
        $(".box").draggable({ delay: 0, distance: 0 },{
        drag: function(event, ui){
var x1 = $("#box1").offset().left + boxCenterXOffset;
var x2 = $("#box2").offset().left + boxCenterXOffset;
var x3 = $("#box3").offset().left + boxCenterXOffset;
var y1 = $("#box1").offset().top + boxCenterYOffset;
var y2 = $("#box2").offset().top + boxCenterYOffset;
var y3 = $("#box3").offset().top + boxCenterYOffset;

var hypotenuse  = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
var hypotenuse2 = Math.sqrt((x2-x3)*(x2-x3) + (y2-y3)*(y2-y3));
var angle  = Math.atan2((y1-y2), (x1-x2)) *  (180/Math.PI);
var angle2 = Math.atan2((y2-y3), (x2-x3)) *  (180/Math.PI);
if(angle >= 90 && angle < 180){
        y1 = y1 - (y1-y2);
        }
        if(angle > 0 && angle < 90){
        x1 = x1 - (x1-x2);
        y1 = y1 - (y1-y2);
        }
        if(angle <= 0 && angle > -90){
        x1 = x1 - (x1-x2);
        }
if(angle2 >= 90 && angle2 < 180){
        y2 = y2 - (y2-y3);
        }
        if(angle2 > 0 && angle2 < 90){
        x2 = x2 - (x2-x3);
        y2 = y2 - (y2-y3);
        }
        if(angle2 <= 0 && angle2 > -90){
        x2 = x2 - (x2-x3);
        }
$("#line").queue(function(){
$(this).offset({top: y1, left: x1});
$(this).dequeue();
}).queue(function(){
$(this).width(hypotenuse);
$(this).dequeue();
}).queue(function(){
$(this).rotate(angle);
$(this).dequeue();
});
$("#line2").queue(function(){
$(this).offset({top: y2, left: x2});
$(this).dequeue();
}).queue(function(){
$(this).width(hypotenuse2);
$(this).dequeue();
}).queue(function(){
$(this).rotate(angle2);
$(this).dequeue();
});

Answer 1

js way：

调用您的功能，以绘制/更新文档加载事件的事件侦听器线。看起来像这样

document.addEventListener("load", function_to_draw_line);

加载DOM时将执行您的代码。

jQuery方式：

当拖动任何一个DIV时，您已经有一个函数。用名称定义此功能，然后将其连接到拖动事件和创建事件。功能应该看起来像这样：

function drawLine(event,ui) {
    //put your function in here
}

然后，您的$（文档）。dready应该看起来像：

$(document).ready(function(){
    $(".box").draggable({ delay: 0, distance: 0 },{
        drag: drawLine,
        create: drawLine
    });
});