javascript - css，jquery调整可拖动div之间的线

Question

我画了一条连接可拖动 div 之间的线。但是，当拖动 div 时，该线会丢失其源点和目标点(即从一个 div 到另一个 div)。我的目标是以这样的方式设置线条，使其不会从任何 div 中丢失其边缘，并且无论我将 div 拖动到何处，它都会动态更新自身，即高度、旋转、位置。

抱歉英语不好。请帮忙.....!这是我的代码

var coordinates = function(element) {
  element = $(element);
  var top = element.position().top;
  var left = element.position().left;

  //--------------line------------------------------
  var length = Math.sqrt(((left) * (left)) + ((top) * (top)));
  var angle = Math.atan2(top, left) * 180 / Math.PI;
  var transform = 'rotate(' + angle + 'deg)';

  $('#results').text('X: ' + left + ' ' + 'Y: ' + top).attr('style', 'margin-left:' + left + 'px');
  //$('#line1').attr('style', "margin-left:"+left+"px;margin-top:"+top+"px;height:"+(parseInt(100+top))+"px;transform:"+transform+";width:"+length+"px;");

  $('#line1').attr('style', "transform:" + transform + ";height:" + length + "px;");

}

//alert($('#box1').position().top);

$('#box1').draggable({
  start: function() {
    coordinates('#box1');
  },
  stop: function() {
    coordinates('#box1');
  }
});

$('#box2').draggable({
  start: function() {
    coordinates('#box2');
  },
  stop: function() {
    coordinates('#box2');
  }
});

.box {
  border: 1px solid black;
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}

.line {
  width: 1px;
  height: 100px;
  background-color: black;
  position: absolute;
}

#box1 {
  top: 0;
  left: 0;
}

#box2 {
  top: 200px;
  left: 0;
}

#box3 {
  top: 250px;
  left: 200px;
}

#line1 {
  top: 100px;
  left: 50px;
  /*transform: rotate(222deg);
    -webkit-transform: rotate(222deg);
    -ms-transform: rotate(222deg);*/
}

#line2 {
  top: 220px;
  left: 150px;
  height: 115px;
  transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>


<div class="line" id="line1"></div>


<div id="results">test</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 1

如果您将线条设为 svg 元素，那么您可以操作 x1、x2、y1和基于两个框位置的线的 y2 属性。

参见下面的示例:

const $b1 = $("#box1");
const $b2 = $("#box2");
const $line = $("line");
const padding = 7;
const coordinates = function() {
  const x1 = $b1.offset().left + $b1.width()/2-padding;
  const y1 = $b1.offset().top + $b1.height()/2-padding;
  const x2 = $b2.offset().left + $b1.width()/2-padding;
  const y2 = $b2.offset().top + $b1.height()/2-padding;

  $line.attr("x1", x1);
  $line.attr("y1", y1);
  $line.attr("x2", x2);
  $line.attr("y2", y2);
}
coordinates();


$('#box1').draggable({
  drag: coordinates
});

$('#box2').draggable({
  drag: coordinates
});

.box {
  border: 1px solid black;
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}


#box1 {
  top: 0;
  left: 0;
}

#box2 {
  top: 200px;
  left: 0;
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

<svg height="1000" width="1000">
  <line id="line" x1="0" y1="0" x2="200" y2="200" style="stroke: rgb(0,0,0); stroke-width:1" />
</svg>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

如果您想使用 div 而不是 svg，可以使用您提供的 createLine() 方法获得相同的结果:

const $b1 = $("#box1");
const $b2 = $("#box2");
const $line = $("#line");

const coordinates = function() {
  const x1 = $b1.offset().left + $b1.width()/2;
  const y1 = $b1.offset().top + $b1.height()/2;
  const x2 = $b2.offset().left + $b1.width()/2;
  const y2 = $b2.offset().top + $b1.height()/2;

  moveLine(x1, y1, x2, y2);  
}

coordinates();

function moveLine(x1, y1, x2, y2) {
    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    offsetX = (x1 > x2) ? x2 : x1;
    offsetY = (y1 > y2) ? y2 : y1;
    
    $line.css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });
}

$('#box1').draggable({
  drag: coordinates
});

$('#box2').draggable({
  drag: coordinates
});

.box {
  border: 1px solid black;
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}

#line1 {
  top: 100px;
  left: 50px;
  /*transform: rotate(222deg);
    -webkit-transform: rotate(222deg);
    -ms-transform: rotate(222deg);*/
}

.line {
  width: 1px;
  height: 1px;
  background-color: black;
  position: absolute;
  z-index: -1; /* put line behind the boxes */
}


#box1 {
  top: 0;
  left: 0;
}

#box2 {
  top: 200px;
  left: 0;
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

<div class="line" id="line"></div>
   

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

对于三个盒子，我建议您添加一个data-connect属性，该属性指定您的线路连接到哪些盒子。然后您可以遍历每条线并绘制连接到每个框的线:

const coordinates = function() {

  $(".line").each(function() {
    const [box1, box2] = $(this).data("connect").split(',');
    const $b1 = $(box1);
    const $b2 = $(box2);
    
    const x1 = $b1.offset().left + $b1.width()/2;
    const y1 = $b1.offset().top + $b1.height()/2;
  
    const x2 = $b2.offset().left + $b2.width()/2;
    const y2 = $b2.offset().top + $b2.height()/2;

    moveLine(x1, y1, x2, y2, $(this)); 
  });

   
}

coordinates();

function moveLine(x1, y1, x2, y2, $line) {
    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    var offsetX = (x1 > x2) ? x2 : x1;
    var offsetY = (y1 > y2) ? y2 : y1;
    
    $line.css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });
}

$('.box').draggable({
  drag: coordinates
});

.box {
  border: 1px solid black;
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}

#line1 {
  top: 100px;
  left: 50px;
  /*transform: rotate(222deg);
    -webkit-transform: rotate(222deg);
    -ms-transform: rotate(222deg);*/
}

.line {
  width: 1px;
  height: 1px;
  background-color: black;
  position: absolute;
  z-index: -1; /* put line behind the boxes */
}


#box1 {
  top: 0;
  left: 0;
}

#box2 {
  top: 200px;
  left: 0;
}

#box3 {
  top: 200px;
  left: 200px;
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>

<div class="line" id="line" data-connect="#box1,#box2"></div>
<div class="line" id="line2" data-connect="#box1,#box3"></div>
   

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>