mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-15 22:22:53 +03:00
0b04c7d504
When element that is being dragged stays under the mouse, it prevents the hit target check on drop from working, because drop target is overlayed by the dragged element. To workaround this, we perform a one-time hit target check before moving for the drop, as we used to.
45 lines
970 B
HTML
45 lines
970 B
HTML
<style>
|
|
div {
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
#from {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="container">
|
|
<div id="to">
|
|
Drop here
|
|
</div>
|
|
<div id="from">
|
|
Drag me
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const from = document.querySelector('#from');
|
|
const to = document.querySelector('#to');
|
|
|
|
let start = null;
|
|
from.addEventListener('mousedown', e => {
|
|
start = { x: e.clientX, y: e.clientY };
|
|
});
|
|
|
|
document.body.addEventListener('mousemove', e => {
|
|
if (start) {
|
|
from.style.top = (e.clientY - start.y) + 'px';
|
|
from.style.left = (e.clientX - start.x) + 'px';
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener('mouseup', e => {
|
|
const box = to.getBoundingClientRect();
|
|
if (start && box.left < e.clientX && box.right > e.clientX && box.top < e.clientY && box.bottom > e.clientY)
|
|
to.textContent = 'Dropped';
|
|
start = null;
|
|
from.style.top = '0';
|
|
from.style.left = '0';
|
|
});
|
|
</script>
|