mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 12:19:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Begin implementing the drag-and-drop processing model

Browse source 
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.
This commit is contained in:
Timothy Flynn 2024-08-17 13:29:55 -04:00 • committed by Andreas Kling
commit e8a1b89447
Notes: github-actions[bot] 2024-08-19 11:30:44 +00:00
15 changed files with 944 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

65
Tests/LibWeb/Text/input/HTML/drag-and-drop.html Normal file
View file

@ -0,0 +1,65 @@
<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>