mirror of
https://github.com/fergalmoran/ladybird.git
synced 2025-12-22 09:19:03 +00:00
e8a1b89447
The drag-and-drop processing model allows for users to drag around either elements within the DOM or objects completely outside the DOM. This drag event can either end without action (via cancellation or user input), or in a drop event, where the dragged object is dropped onto another element within the DOM. The processing model is rather large. This implements enough of it to allow the UI process to specifically handle dragging objects outside of the DOM onto the DOM. For example, dragging an image from the OS file manager onto a file-upload input element. This does not implement the ability to drag DOM elements.
66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
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;
|
|
|
|
target.addEventListener("dragenter", e => {
|
|
println("dragenter");
|
|
if (acceptDragEvents) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
target.addEventListener("dragover", e => {
|
|
println("dragover");
|
|
if (acceptDragEvents) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
target.addEventListener("dragleave", () => {
|
|
println("dragleave");
|
|
});
|
|
target.addEventListener("drop", e => {
|
|
println("drop");
|
|
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);
|
|
|
|
println("\nDrag enter not accepted:");
|
|
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>
|