大佬教程收集整理的这篇文章主要介绍了使用CSS和JavaScript在两个元素之间创建一条线,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
到目前为止,我只尝试了一个自定义行来启动它.
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);stroke-width:3" /> </svg>
如果你有一个在另一个之上变得更复杂 – 那么你基本上需要:角度,将它应用于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; }
<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>
这是一个很好的起点,我猜(很少有东西可以让它完美),但我想你会得到它……
演示(更好地在这里看到它,片段不是很好,对于这种演示):https://jsfiddle.net/dxre19o6/
以上是大佬教程为你收集整理的使用CSS和JavaScript在两个元素之间创建一条线全部内容,希望文章能够帮你解决使用CSS和JavaScript在两个元素之间创建一条线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。