310 lines
10 KiB
HTML
310 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Drag and Drop Test Page</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.test-section {
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.draggable {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: move;
|
|
border-radius: 8px;
|
|
margin: 10px;
|
|
user-select: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.draggable:hover {
|
|
background: #45a049;
|
|
}
|
|
|
|
.drop-zone {
|
|
width: 200px;
|
|
height: 150px;
|
|
border: 3px dashed #ccc;
|
|
background: #fafafa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 10px;
|
|
border-radius: 8px;
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.drop-zone.drag-over {
|
|
border-color: #4CAF50;
|
|
background: #e8f5e8;
|
|
}
|
|
|
|
.drop-zone.has-item {
|
|
background: #d4edda;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.log {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
border-radius: 4px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.coordinates {
|
|
position: absolute;
|
|
background: rgba(0,0,0,0.8);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#coordinate-target {
|
|
width: 300px;
|
|
height: 200px;
|
|
border: 2px solid #007bff;
|
|
background: #e7f3ff;
|
|
position: relative;
|
|
margin: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dropped-item {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #ff6b6b;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Drag and Drop Test Page</h1>
|
|
<p>This page tests various drag and drop scenarios for debugging automation tools.</p>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 1: Element to Element Drag</h2>
|
|
<p>Drag the green box to the drop zone</p>
|
|
<div class="container">
|
|
<div class="draggable" id="drag-item-1" draggable="true">Drag Me</div>
|
|
<div class="drop-zone" id="drop-zone-1">Drop Here</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 2: Multiple Draggable Items</h2>
|
|
<p>Drag any item to any drop zone</p>
|
|
<div class="container">
|
|
<div class="draggable" id="drag-item-2a" draggable="true">Item A</div>
|
|
<div class="draggable" id="drag-item-2b" draggable="true">Item B</div>
|
|
<div class="draggable" id="drag-item-2c" draggable="true">Item C</div>
|
|
<div class="drop-zone" id="drop-zone-2a">Zone 1</div>
|
|
<div class="drop-zone" id="drop-zone-2b">Zone 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 3: Coordinate-based Drop</h2>
|
|
<p>Drag the item and drop it at specific coordinates in the blue area</p>
|
|
<div class="container">
|
|
<div class="draggable" id="drag-item-3" draggable="true">Drag to XY</div>
|
|
<div id="coordinate-target">
|
|
<div style="position: absolute; top: 10px; left: 10px; font-size: 12px; color: #666;">
|
|
Drop anywhere in this blue area
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 4: Offset-based Drag</h2>
|
|
<p>Drag the item by a relative offset</p>
|
|
<div class="container">
|
|
<div class="draggable" id="drag-item-4" draggable="true" style="position: relative;">Offset Drag</div>
|
|
<div style="margin-left: 150px; margin-top: 50px; padding: 20px; border: 2px dashed #666; border-radius: 8px;">
|
|
Expected drop area (150px right, 50px down)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="clearLog()">Clear Log</button>
|
|
<button onclick="resetAll()">Reset All</button>
|
|
|
|
<div class="log" id="event-log">
|
|
<div><strong>Event Log:</strong></div>
|
|
</div>
|
|
|
|
<script>
|
|
let dragCounter = 0;
|
|
|
|
function log(message) {
|
|
const logDiv = document.getElementById('event-log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logDiv.innerHTML += `<div>[${timestamp}] ${message}</div>`;
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('event-log').innerHTML = '<div><strong>Event Log:</strong></div>';
|
|
}
|
|
|
|
function resetAll() {
|
|
// Reset all drop zones
|
|
document.querySelectorAll('.drop-zone').forEach(zone => {
|
|
zone.classList.remove('has-item');
|
|
zone.innerHTML = zone.id.includes('2') ?
|
|
(zone.id.includes('2a') ? 'Zone 1' : 'Zone 2') : 'Drop Here';
|
|
});
|
|
|
|
// Reset coordinate target
|
|
document.querySelectorAll('.dropped-item').forEach(item => item.remove());
|
|
|
|
// Reset draggable positions
|
|
document.querySelectorAll('.draggable').forEach(item => {
|
|
item.style.position = '';
|
|
item.style.left = '';
|
|
item.style.top = '';
|
|
});
|
|
|
|
log('All tests reset');
|
|
}
|
|
|
|
// Add drag and drop event listeners
|
|
document.querySelectorAll('.draggable').forEach(item => {
|
|
item.addEventListener('dragstart', (e) => {
|
|
e.dataTransfer.setData('text/plain', e.target.id);
|
|
e.target.style.opacity = '0.5';
|
|
log(`Drag started: ${e.target.id}`);
|
|
});
|
|
|
|
item.addEventListener('dragend', (e) => {
|
|
e.target.style.opacity = '1';
|
|
log(`Drag ended: ${e.target.id}`);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.drop-zone').forEach(zone => {
|
|
zone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
zone.classList.add('drag-over');
|
|
});
|
|
|
|
zone.addEventListener('dragleave', (e) => {
|
|
zone.classList.remove('drag-over');
|
|
});
|
|
|
|
zone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
zone.classList.remove('drag-over');
|
|
zone.classList.add('has-item');
|
|
|
|
const draggedId = e.dataTransfer.getData('text/plain');
|
|
zone.innerHTML = `Dropped: ${draggedId}`;
|
|
log(`Drop successful: ${draggedId} -> ${zone.id}`);
|
|
});
|
|
});
|
|
|
|
// Coordinate target handling
|
|
const coordinateTarget = document.getElementById('coordinate-target');
|
|
coordinateTarget.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
coordinateTarget.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
const rect = coordinateTarget.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const droppedItem = document.createElement('div');
|
|
droppedItem.className = 'dropped-item';
|
|
droppedItem.style.left = x + 'px';
|
|
droppedItem.style.top = y + 'px';
|
|
droppedItem.title = `Dropped at (${Math.round(x)}, ${Math.round(y)})`;
|
|
|
|
coordinateTarget.appendChild(droppedItem);
|
|
|
|
const draggedId = e.dataTransfer.getData('text/plain');
|
|
log(`Coordinate drop: ${draggedId} at (${Math.round(x)}, ${Math.round(y)})`);
|
|
});
|
|
|
|
// Mouse tracking for debugging
|
|
let mouseCoords = null;
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (mouseCoords) {
|
|
mouseCoords.style.left = (e.clientX + 10) + 'px';
|
|
mouseCoords.style.top = (e.clientY - 30) + 'px';
|
|
mouseCoords.textContent = `(${e.clientX}, ${e.clientY})`;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mousedown', (e) => {
|
|
if (e.target.classList.contains('draggable')) {
|
|
mouseCoords = document.createElement('div');
|
|
mouseCoords.className = 'coordinates';
|
|
document.body.appendChild(mouseCoords);
|
|
log(`Mouse down on ${e.target.id} at (${e.clientX}, ${e.clientY})`);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', (e) => {
|
|
if (mouseCoords) {
|
|
mouseCoords.remove();
|
|
mouseCoords = null;
|
|
log(`Mouse up at (${e.clientX}, ${e.clientY})`);
|
|
}
|
|
});
|
|
|
|
log('Drag and drop test page loaded');
|
|
</script>
|
|
</body>
|
|
</html>
|