'Why is clientX reset to 0 on last drag-event and how to solve it?
I'm trying to drag elements along a line. They should push each other, not cross over or under.
To avoid having a shady element float around on drag, I drag a sub-div which then affects the position of the outer one. Works fine except when you release the mouse which triggers the last drag-event with clientX
equal to 0
(see CodePen)!
var b = document.querySelector('.box');
var bi = document.querySelector('.box-inner');
var b2 = document.querySelector('.box2');
bi.addEventListener('dragstart', function() {
console.log("dragstart")
}, false);
bi.addEventListener('drag', function(event) {
const bLeft = event.clientX;
const b2Left = b2.offsetLeft;
b.style.left = bLeft + "px";
if (b2Left - 50 <= bLeft) {
b2.style.left = (bLeft + 50) + "px";
}
console.log("drag", event.clientX, event.target.offsetParent.offsetLeft, b2.offsetLeft);
}, false);
bi.addEventListener('dragend', function() {
console.log("dragend")
}, false);
.box {
width: 50px;
height: 50px;
background-color: hotpink;
position: absolute;
top: 0;
left: 0;
}
.box-inner {
width: 100%;
height: 100%;
}
.box2 {
width: 50px;
height: 50px;
background-color: rebeccapurple;
position: absolute;
left: 200px;
top: 0;
}
<div class="box">
<div class="box-inner" draggable="true"></div>
</div>
<div class="box2"></div>
Why is this and what can I do to avoid resetting it?
Solution 1:[1]
By default, data/elements cannot be dropped in other elements. To allow a drop, you must prevent the default handling of the element when dragover.
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
Solution 2:[2]
I just ignore the last event. I don't know why it emits.
// in `drag` event handler
if (event.screenX === 0) {
return;
}
Notice you should use screenX
here. When the user zoom in the page, clientX
would be a positive value but not zero.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | adl |
Solution 2 | alsotang |