代码之家 › 专栏 › 技术社区 › user3162878

css、jquery调整可拖动div之间的行

css html jquery javascript

user3162878 · 技术社区 · 5 年前

我画了一条连接可拖动潜水器的线。但是,当拖动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>

0 回复 | 直到 5 年前

Nick Parsons Felix Kling 5 年前

如果你让你的线 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>