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;

}

By4xvE5.png

By4xvE5.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值