fixes 1
This commit is contained in:
parent
19f340aaf2
commit
c425fcd474
|
|
@ -39,42 +39,33 @@ div:not(.mouse-helper) {
|
||||||
<div id="target">Drop Zone</div>
|
<div id="target">Drop Zone</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Elements
|
|
||||||
const sourceElement = document.getElementById('source');
|
const sourceElement = document.getElementById('source');
|
||||||
const targetElement = document.getElementById('target');
|
const targetElement = document.getElementById('target');
|
||||||
|
|
||||||
// State variables
|
|
||||||
let isDragging = false;
|
let isDragging = false;
|
||||||
let offsetX, offsetY;
|
let offsetX, offsetY;
|
||||||
let originalPosition = { left: 0, top: 0 };
|
let originalPosition = { left: 0, top: 0 };
|
||||||
|
|
||||||
// Mouse down handler - start dragging
|
|
||||||
sourceElement.addEventListener('mousedown', function(e) {
|
sourceElement.addEventListener('mousedown', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// Store the original position
|
|
||||||
const rect = sourceElement.getBoundingClientRect();
|
const rect = sourceElement.getBoundingClientRect();
|
||||||
originalPosition = {
|
originalPosition = {
|
||||||
left: rect.left,
|
left: rect.left,
|
||||||
top: rect.top
|
top: rect.top
|
||||||
};
|
};
|
||||||
|
|
||||||
// Calculate the mouse offset
|
|
||||||
offsetX = e.clientX - rect.left;
|
offsetX = e.clientX - rect.left;
|
||||||
offsetY = e.clientY - rect.top;
|
offsetY = e.clientY - rect.top;
|
||||||
|
|
||||||
// Start dragging
|
|
||||||
isDragging = true;
|
isDragging = true;
|
||||||
sourceElement.style.border = 'dashed'
|
sourceElement.style.border = 'dashed'
|
||||||
|
|
||||||
console.log('mousedown', e.clientX, e.clientY);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mouse move handler - move the element
|
// Mouse move handler - move the element
|
||||||
document.addEventListener('mousemove', function(e) {
|
document.addEventListener('mousemove', function(e) {
|
||||||
if (!isDragging) return;
|
if (!isDragging) return;
|
||||||
|
|
||||||
// Set new position
|
|
||||||
sourceElement.style.left = (e.clientX - offsetX) + 'px';
|
sourceElement.style.left = (e.clientX - offsetX) + 'px';
|
||||||
sourceElement.style.top = (e.clientY - offsetY) + 'px';
|
sourceElement.style.top = (e.clientY - offsetY) + 'px';
|
||||||
});
|
});
|
||||||
|
|
@ -85,7 +76,6 @@ div:not(.mouse-helper) {
|
||||||
|
|
||||||
isDragging = false;
|
isDragging = false;
|
||||||
|
|
||||||
// Check if dropped on target area
|
|
||||||
const sourceRect = sourceElement.getBoundingClientRect();
|
const sourceRect = sourceElement.getBoundingClientRect();
|
||||||
const targetRect = targetElement.getBoundingClientRect();
|
const targetRect = targetElement.getBoundingClientRect();
|
||||||
|
|
||||||
|
|
@ -97,17 +87,14 @@ div:not(.mouse-helper) {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (isOverlapping) {
|
if (isOverlapping) {
|
||||||
// Successful drop - append to target
|
|
||||||
targetElement.appendChild(sourceElement);
|
targetElement.appendChild(sourceElement);
|
||||||
|
|
||||||
// Reset position relative to the new parent
|
|
||||||
sourceElement.style.removeProperty('position')
|
sourceElement.style.removeProperty('position')
|
||||||
sourceElement.style.removeProperty('top')
|
sourceElement.style.removeProperty('top')
|
||||||
sourceElement.style.removeProperty('left')
|
sourceElement.style.removeProperty('left')
|
||||||
|
|
||||||
console.log('Drop successful');
|
console.log('Drop successful');
|
||||||
} else {
|
} else {
|
||||||
// Failed drop - return to original position
|
|
||||||
sourceElement.style.left = originalPosition.left + 'px';
|
sourceElement.style.left = originalPosition.left + 'px';
|
||||||
sourceElement.style.top = originalPosition.top + 'px';
|
sourceElement.style.top = originalPosition.top + 'px';
|
||||||
|
|
||||||
|
|
@ -115,15 +102,13 @@ div:not(.mouse-helper) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Cancel dragging if mouse leaves the window
|
|
||||||
document.addEventListener('mouseleave', function() {
|
document.addEventListener('mouseleave', function() {
|
||||||
if (isDragging) {
|
if (isDragging) {
|
||||||
isDragging = false;
|
isDragging = false;
|
||||||
|
|
||||||
// Return to original position
|
|
||||||
sourceElement.style.left = originalPosition.left + 'px';
|
sourceElement.style.left = originalPosition.left + 'px';
|
||||||
sourceElement.style.top = originalPosition.top + 'px';
|
sourceElement.style.top = originalPosition.top + 'px';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -321,7 +321,7 @@ it.describe('Drag and drop', () => {
|
||||||
await page.goto(server.PREFIX + '/drag-n-drop-manual.html');
|
await page.goto(server.PREFIX + '/drag-n-drop-manual.html');
|
||||||
const events = await page.evaluateHandle(() => {
|
const events = await page.evaluateHandle(() => {
|
||||||
const events = [];
|
const events = [];
|
||||||
document.addEventListener('drop', (event: MouseEvent) => {
|
document.addEventListener('mousemove', (event: MouseEvent) => {
|
||||||
events.push({
|
events.push({
|
||||||
type: event.type,
|
type: event.type,
|
||||||
x: event.clientX,
|
x: event.clientX,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue