問題描述
對于發(fā)布這么多問題，我深表歉意 - 我還在學(xué)習(xí)！所以，我可以在 html 中拖放第一個元素沒有問題；但是，當(dāng)我嘗試拖放第二個時(shí)，它會出現(xiàn)在鼠標(biāo)下方相當(dāng)多.它仍然在我移動鼠標(biāo)的任何地方拖動，但遠(yuǎn)低于.怎么了?
I apologize for posting so many questions- I'm still learning! So, I can drag and drop the first element in the html no problem; however, when I try to drag and drop the second one, it appears quite a bit below the mouse. It still drags wherever I move the mouse, but far below. What's wrong?
這里是javascript:
Here is the javascript:
// JavaScript Document
var posX;
var posY;
var element;
document.addEventListener("mousedown", drag, false);
function drag(event) {
if(event.target.className == "square") {
element = event.target;
posX = event.clientX -parseInt(element.offsetLeft);
posY = event.clientY -parseInt(element.offsetTop);
document.addEventListener("mousemove", move, false);
}
}
function move(event) {
if (typeof(element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
這里是html:
<body>
<p class="square">Thing One</p>
<p class="square">Thing Two</p>
</body>
這是css:
/* CSS Document */
.square {
position: relative;
width: 100px;
height: 100px;
background: red;
}
p {
padding: 0px;
margin: 0px;
}
感謝大家的寶貴時(shí)間！非常感謝！
Thank you all for your time! I greatly appreciate it!
推薦答案
這里有兩個不同的問題需要考慮:
There are two separate issues to consider here:
- 如何獲取頁面上元素的位置?
- 當(dāng)我為
left和top樣式屬性分配新值時(shí)會發(fā)生什么?
- How can I get the position of an element on the page?
- What happens when I assign new values to the
leftandtopstyle properties?
第一個問題的答案取決于對element.offsetLeft和element.offsetTop的理解.這些屬性給出了相對于 element.offsetParent 的偏移量，定義為最近的(包含層次結(jié)構(gòu)中最近的)定位的包含元素".
The answer to the first question relies on an understanding of element.offsetLeft and element.offsetTop. These properties give the offset relative to element.offsetParent which is defined as "the closest (nearest in the containment hierarchy) positioned containing element".
在您的文檔中，這是 <body> 元素，因此它可以按您的預(yù)期工作.如果您將方塊放在其他元素中，您會發(fā)現(xiàn)您的代碼將停止工作.你需要的是一個函數(shù)來遍歷包含元素的樹并對每個偏移量求和，像這樣:
In your document this is the <body> element, so it works as you expected. If you were to place your squares inside other elements you'd find that your code would stop working. What you'd need is a function to walk up the tree of containing elements and sum each of the offsets, like this:
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
這樣使用:
var pos= findPos(element);
posX = event.clientX - pos.x;
posY = event.clientY - pos.y;
回答第二個問題需要了解相對定位的元素.相對定位的元素出現(xiàn)在它們通常出現(xiàn)在頁面上的位置相對.當(dāng)您為 top 和 left 賦值時(shí)，您并沒有給出絕對值.您給出的位置被視為相對于布局中元素的原始位置.這是相對定位的特性，而不是錯誤.您可能想使用 position: absolute; 代替.
Answering the second question requires an understanding of relatively positioned elements. Elements that are positioned relatively appear in a position relative to where they would normally appear on the page. When you assign values to top and left you're not giving absolute values. You're giving positions that are treated as relative to the element's original position in the layout. This is a feature of relative positioning, not a bug. You probably want to use position: absolute; instead.
這篇關(guān)于在 JavaScript 中相對定位的元素上實(shí)現(xiàn)拖放的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！