mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-02 04:27:12 +02:00
LibWeb: Begin implementing the drag-and-drop processing model
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:
committed by
Andreas Kling
parent
3674e037f3
commit
e8a1b89447
Notes:
github-actions[bot]
2024-08-19 11:30:44 +00:00
Author: https://github.com/trflynn89 Commit: https://github.com/LadybirdBrowser/ladybird/commit/e8a1b894471 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1111
65
Tests/LibWeb/Text/input/HTML/drag-and-drop.html
Normal file
65
Tests/LibWeb/Text/input/HTML/drag-and-drop.html
Normal 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>
|
||||
Reference in New Issue
Block a user