html两个元素使用线段连接,使用CSS和JavaScript在两个元素之间创建一条线

好的,正如评论中所提到的,当点在同一条线上时相对容易.

如果你有一个在另一个之上变得更复杂 – 那么你基本上需要：角度,将它应用于CSS变换：旋转属性,以及两个点/元素之间的长度,以重新计算宽度,因为它不再是直线.我讨厌数学:),所以我使用来自互联网的好人的知识：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;

}

这是一个很好的起点,我猜(很少有东西可以让它完美),但我想你会得到它……