mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-30 11:37:16 +02:00
22c1b72588
Also, explicitly prevent drag events from firing when the context menu opens. This will only be the case on macOS, since its context menu is opened by Ctrl+mousedown. This replaces the prior exception preventing drag events when Ctrl is held during mousedown. Fixes #9018 and #9019
134 lines
4.0 KiB
HTML
134 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a,
|
|
div,
|
|
img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
display: block;
|
|
}
|
|
</style>
|
|
<div id="target">target</div>
|
|
<div id="source" draggable="true">source</div>
|
|
<div id="nodrag">nodrag</div>
|
|
<a id="link" href="https://example.com" draggable="true">link</a>
|
|
<img
|
|
id="image"
|
|
draggable="true"
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/iZk9HQAAAABJRU5ErkJggg=="
|
|
/>
|
|
<script src="../include.js"></script>
|
|
<script type="text/javascript">
|
|
test(() => {
|
|
const printEvent = (name, e) => {
|
|
println(name);
|
|
println(` types: ${e.dataTransfer.types}`);
|
|
};
|
|
|
|
target.addEventListener("dragenter", e => {
|
|
printEvent("target: dragenter", e);
|
|
e.preventDefault();
|
|
});
|
|
target.addEventListener("dragover", e => {
|
|
printEvent("target: dragover", e);
|
|
e.preventDefault();
|
|
});
|
|
target.addEventListener("dragleave", e => {
|
|
printEvent("dragleave", e);
|
|
});
|
|
target.addEventListener("drop", e => {
|
|
printEvent("target: drop", e);
|
|
println(` text/plain: '${e.dataTransfer.getData("text/plain")}'`);
|
|
println(` text/uri-list: '${e.dataTransfer.getData("text/uri-list")}'`);
|
|
e.preventDefault();
|
|
});
|
|
|
|
source.addEventListener("dragstart", e => {
|
|
e.dataTransfer.setData("text/plain", "hello");
|
|
println("source: dragstart");
|
|
});
|
|
source.addEventListener("dragend", e => {
|
|
println(`source: dragend:${e.dataTransfer.dropEffect}`);
|
|
});
|
|
|
|
nodrag.addEventListener("mousedown", () => {
|
|
println("nodrag: mousedown");
|
|
});
|
|
nodrag.addEventListener("mousemove", () => {
|
|
println("nodrag: mousemove");
|
|
});
|
|
nodrag.addEventListener("dragstart", () => {
|
|
println("nodrag: dragstart");
|
|
});
|
|
nodrag.addEventListener("mouseup", () => {
|
|
println("nodrag: mouseup");
|
|
});
|
|
|
|
link.addEventListener("dragstart", e => {
|
|
println("dragstart");
|
|
println(` types: ${e.dataTransfer.types}`);
|
|
});
|
|
|
|
image.addEventListener("dragstart", e => {
|
|
println("dragstart");
|
|
println(` types: ${e.dataTransfer.types}`);
|
|
});
|
|
|
|
println("Drag div:");
|
|
internals.mouseDown(50, 150);
|
|
internals.mouseMove(50, 125);
|
|
internals.mouseMove(50, 50);
|
|
internals.mouseUp(50, 50);
|
|
|
|
println("\nDrag non-draggable div:");
|
|
internals.mouseDown(50, 250);
|
|
internals.mouseMove(50, 275);
|
|
internals.mouseUp(50, 275);
|
|
|
|
println("\nDrag link:");
|
|
internals.mouseDown(50, 350);
|
|
internals.mouseMove(50, 325);
|
|
internals.mouseMove(50, 50);
|
|
internals.mouseUp(50, 50);
|
|
|
|
println("\nDrag image:");
|
|
internals.mouseDown(50, 450);
|
|
internals.mouseMove(50, 425);
|
|
internals.mouseMove(50, 50);
|
|
internals.mouseUp(50, 50);
|
|
|
|
println("\nDragstart cancelled:");
|
|
source.addEventListener(
|
|
"dragstart",
|
|
e => {
|
|
println("dragstart (cancelling)");
|
|
e.preventDefault();
|
|
},
|
|
{ once: true }
|
|
);
|
|
internals.mouseDown(50, 150);
|
|
internals.mouseMove(50, 125);
|
|
internals.mouseMove(50, 50);
|
|
internals.mouseMove(55, 50);
|
|
internals.mouseUp(50, 50);
|
|
|
|
println("\nMousedown cancelled (prevents dragstart):");
|
|
source.addEventListener(
|
|
"mousedown",
|
|
e => {
|
|
println(`source: ${e.type} (cancelling)`);
|
|
e.preventDefault();
|
|
},
|
|
{ once: true });
|
|
internals.mouseDown(50, 150);
|
|
internals.mouseMove(50, 125);
|
|
internals.mouseMove(50, 50);
|
|
internals.mouseUp(50, 50);
|
|
});
|
|
</script>
|