mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
b7076c366d
The spec dictates that dragenter events must be cancelled in order for drops to be accepted on the entered element. Web reality disagrees, as all three major browsers do not have this requirement.
84 lines
2.9 KiB
HTML
84 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<div id="target" style="width: 200px; height: 200px"></div>
|
|
<script src="../include.js"></script>
|
|
<script type="text/javascript">
|
|
test(() => {
|
|
let target = document.getElementById("target");
|
|
let acceptDragEvents = true;
|
|
|
|
const printEvent = (name, e) => {
|
|
println(name);
|
|
println(` types: ${e.dataTransfer.types}`);
|
|
|
|
const files = e.dataTransfer.files;
|
|
|
|
if (files.length !== 0) {
|
|
println(` files: ${files.length}`);
|
|
|
|
for (const file of files) {
|
|
println(` ${file.name}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
target.addEventListener("dragenter", e => {
|
|
printEvent("dragenter", e);
|
|
if (acceptDragEvents) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
target.addEventListener("dragover", e => {
|
|
printEvent("dragover", e);
|
|
if (acceptDragEvents) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
target.addEventListener("dragleave", e => {
|
|
printEvent("dragleave", e);
|
|
});
|
|
target.addEventListener("drop", e => {
|
|
printEvent("drop", e);
|
|
if (acceptDragEvents) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
println("Simple drag and drop:");
|
|
internals.simulateDragStart(0, 0, "test1", "well hello friends :^)");
|
|
internals.simulateDragMove(100, 100);
|
|
internals.simulateDrop(100, 100);
|
|
|
|
println("\nDrag enter and leave:");
|
|
internals.simulateDragStart(0, 0, "test2", "well hello friends :^)");
|
|
internals.simulateDragMove(100, 100);
|
|
internals.simulateDragMove(300, 300);
|
|
internals.simulateDragMove(100, 100);
|
|
internals.simulateDrop(100, 100);
|
|
|
|
// Contrary to the spec, we continue with the drag and drop even if the dragenter event is not cancelled.
|
|
// https://github.com/whatwg/html/issues/11608
|
|
println("\nDrag enter not accepted (but still allowed):");
|
|
internals.simulateDragStart(0, 0, "test3", "well hello friends :^)");
|
|
acceptDragEvents = false;
|
|
internals.simulateDragMove(100, 100);
|
|
acceptDragEvents = true;
|
|
internals.simulateDragMove(110, 110);
|
|
internals.simulateDrop(100, 100);
|
|
|
|
println("\nDrag over not accepted:");
|
|
internals.simulateDragStart(0, 0, "test4", "well hello friends :^)");
|
|
internals.simulateDragMove(100, 100);
|
|
acceptDragEvents = false;
|
|
internals.simulateDragMove(110, 110);
|
|
acceptDragEvents = true;
|
|
internals.simulateDrop(100, 100);
|
|
|
|
println("\nDrop not accepted:");
|
|
internals.simulateDragStart(0, 0, "test5", "well hello friends :^)");
|
|
internals.simulateDragMove(100, 100);
|
|
acceptDragEvents = false;
|
|
internals.simulateDrop(100, 100);
|
|
acceptDragEvents = true;
|
|
});
|
|
</script>
|