在javascript中更新div之间的行 [英] Updating line between divs in javascript
本文介绍了在javascript中更新div之间的行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个网页，人们可以点击两个对象，并在两个对象之间创建一条线。但我想进一步，能够连接最后一个与另一个。这是我到目前为止的代码。
I'm trying to make a web page, where people can click on two objects and it creates a line between those two. But I want to go further on and be able to connect the last one with another one. This is the code I have so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img {
padding: 1px;
margin: 2px;
float: left;
background-color: #99BC99
}
img.selected {
padding: 2px;
margin: 4px;
background-color: #E13300
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click(function(){
$(this).toggleClass('selected');
});
});
function connect(div1, div2, color, thickness) {
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
document.body.innerHTML += htmlLine;
}
function getOffset( el ) {
var _x = 0;
var _y = 0;
var _w = el.offsetWidth|0;
var _h = el.offsetHeight|0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x, width: _w, height: _h };
}
window.testIt = function() {
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
connect(div1, div2, "#0F0", 5);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<a onclick="testIt();">Draw line</a>
<span style="position: absolute; left: 933px; top: 211px;"> <img src="Untitled-2.jpg" alt="" width="35" height="35" id="div1"/></span>
<span style="position: absolute; left: 304px; top: 190px;"> <img src="Untitled-3.jpg" alt="" width="35" height="35" id="div2"/></span>
<span style="position: absolute; left: 756px; top: 264px;"> <img src="Untitled-4.jpg" alt="" width="35" height="35" id="div3"/></span>
<span style="position: absolute; left: 365px; top: 395px;"> <img src="Untitled-6.jpg" alt="" width="35" height="35" id="div4"/></span>
<span style="position: absolute; left: 129px; top: 302px;"> <img src="Untitled-5.jpg" alt="" width="35" height="35" id="div5"/></span>
<span style="position: absolute; left: 504px; top: 261px;"> <img src="Untitled-7.jpg" alt="" width="35" height="35" id="div6"/></span>
<span style="position: absolute; left: 650px; top: 393px;"> <img src="Untitled-8.jpg" alt="" width="35" height="35" id="div7"/></span>
<span style="position: absolute; left: 283px; top: 26px;"> <img src="Untitled-9.jpg" alt="" width="35" height="35" id="div8"/></span>
<span style="position: absolute; left: 593px; top: 35px;"> <img src="Untitled-10.jpg" alt="" width="35" height="35" id="div9"/></span>
<span style="position: absolute; left: 784px; top: 42px;"> <img src="Untitled-1.jpg" alt="" width="35" height="35" id="div10"/></span>
</body>
</html>
但它停止在前两个div。如何更新div。说我想要div1是以前的div2和div2是我点击的地方。
提前感谢，我对这个问题的愚蠢道歉。
最好的问候。
But it stops with the first 2 divs. How can I update the div. Say I want div1 to be the previous div2 and div2 to be where i click. Thanks in advance and I apologize for the stupidity of the question. Best Regards.
推荐答案
您需要缓存最后点击的元素。
You will need to cache the last element clicked.
查看此小提琴： http://jsfiddle.net/RY6dM /
根据您的代码，并未进行任何重大更改：
Based on your code and not doing any major changes:
$('img').click(function(){
var $elem1 = $(this).parent(); // cache the span
var $elem2 = $('span.last'); // cache the span with class last
$(this).toggleClass('selected');
if ($elem2.length > 0) { // for the first time there is no cached element
connect($elem1[0], $elem2[0], "#0F0", 5);
} else {
$elem1.addClass('last'); // for subsequent clicks, cache last element
}
$('span').removeClass('last'); // remove class last from all spans
$elem1.addClass('last'); // add class last to current element
});
此外，而不是：
document.body.innerHTML += htmlLine;
您需要执行以下操作：
$('body').append($(htmlLine));
这篇关于在javascript中更新div之间的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
