在JavaScript中相对定位的元素上实现拖放 [英] Implementing drag and drop on relatively positioned elements in JavaScript
问题描述
这是javascript：
// JavaScript文件
var posX;
var posY;
var element;
document.addEventListener（mousedown，drag，false）;
函数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）;
//防止重复冗余添加相同的事件处理器
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文件* /
.square {
position：relative;
width：100px;
height：100px;
背景：红色;
}
p {
padding：0px;
margin：0px;
}
感谢大家的时间！我非常感谢！
有两个不同的问题需要考虑：
- 如何在页面上获取元素的位置？
- 当将新值赋值给
留下和顶部样式属性？
对第一个问题的回答依赖于对 element.offsetLeft 和 element.offsetTop 的理解。 。这些属性赋予相对于 element.offsetParent 的偏移量，这是定义为最接近（最近在包含层次结构中）包含元素。
在您的文档中，这是< body> 元素，所以它的工作原理如你所愿。如果你把你的方块放在其他元素中，你会发现你的代码将停止工作。您需要的是一个功能，用于走上包含元素的树，并对每个偏移量进行总结，像这样：
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;
回答第二个问题需要了解相对定位的元素。定位的元素相对地出现在相对的位置，通常在页面上显示。当您将值分配给顶部和 left 时，您不会给出绝对值。你给出的位置被视为相对于元素在布局中的原始位置。这是一个相对定位的功能，而不是一个bug。你可能想要使用 position：absolute; 。
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?
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");
}
Here is the html:
<body>
<p class="square">Thing One</p>
<p class="square">Thing Two</p>
</body>
Here is the css:
/* CSS Document */
.square {
position: relative;
width: 100px;
height: 100px;
background: red;
}
p {
padding: 0px;
margin: 0px;
}
Thank you all for your time! I greatly appreciate it!
There are two separate issues to consider here:
- How can I get the position of an element on the page?
- What happens when I assign new values to the
leftandtopstyle properties?
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".
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 };
}
}
Used like this:
var pos= findPos(element);
posX = event.clientX - pos.x;
posY = event.clientY - pos.y;
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.
这篇关于在JavaScript中相对定位的元素上实现拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
