javascript - 使用 CSS 和 JavaScript 在两个元素之间画一条线

Question

我试图在页面上的两个点之间画一条线。图片可以拖动并放置到 DIV 中，因此它们的位置可以改变，但仍然需要用线连接它们。

到目前为止，我已经尝试过仅从那里开始的自定义行。

var s = document.getElementById("Red1X");
var x = 200, y = 200;
s.style.x2 = x + "px";
s.style.y2 = y + "px";

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1 {
    width: 17px;
    height: 17px;
    padding: 0px;
    border: 1px solid #aaaaff;
    float: left
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">

<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">

<svg height="500" width="500">
  <line id="Red1X" x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>

Answer 1

好的，如评论中所述，当点在同一行时相对容易。

如果你有一个在另一个上面，事情会变得更复杂 - 那么你基本上需要: Angular ，将其应用于 CSS transform:rotate 属性，以及两个点/元素之间的长度，以重新计算宽度，因为它不再是直线.我讨厌数学 :)，所以我使用了来自互联网的好人的知识:http://jsfiddle.net/codepo8/bAwUf/light/ (感谢 codepo8)

最重要的两行:

var angle= Math.atan2(red2.offsetTop - red1.offsetTop, red2.offsetLeft - red1.offsetLeft) * 180 / Math.PI;
var length = Math.sqrt((red2.offsetLeft-red1.offsetLeft) * (red2.offsetLeft-red1.offsetLeft) + (red2.offsetTop-red1.offsetTop) * (red2.offsetTop-red1.offsetTop));

现在，您的脚本应该是这样的:

var s = document.querySelector(".line");
red1=document.getElementById('RED1');
red2=document.getElementById('RED2');

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
 
    s.style.left=red1.offsetLeft+5+'px';
    s.style.top=red1.offsetTop+5+'px';
    
     s.style.visibility='visible';
var angle= Math.atan2(red2.offsetTop - red1.offsetTop, red2.offsetLeft - red1.offsetLeft) * 180 / Math.PI;
var length = Math.sqrt((red2.offsetLeft-red1.offsetLeft) * (red2.offsetLeft-red1.offsetLeft) + (red2.offsetTop-red1.offsetTop) * (red2.offsetTop-red1.offsetTop));
 s.style.width=Math.abs(length)+'px';

     
       s.style.transform="rotate("+Math.round(angle)+"deg)";
       s.style.transformOrigin ="0 0"; 
     
  
    
}

.div1 {
    width: 150px;
    height: 150px;
    padding: 0px;
    border: 1px solid #aaaaff;
    float: left;
   
}
.line {
  position:absolute;
  height:3px;
  background:red;
  width:100px;
  z-index:999;
  visibility:hidden;
}

<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">

<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">



<div class="line">

</div>

我想这是一个很好的起点(几乎没有什么可以让它变得完美)，但我想你会明白的......

DEMO(最好在这里看到，片段不是很好，对于这种演示):https://jsfiddle.net/dxre19o6/