HTML5 DragDrop not implemented

[jogibear9988]

Sample Pages:

https://www.w3schools.com/html/html5_draganddrop.asp https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop https://www.mediaevent.de/javascript/drag-and-drop.html

Spec:

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Error:

6392061.835 WebContent(50436): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.draggable'

[xet7]

It looks like with Ladybird, that I compiled yesterday at Ubuntu 24.10 amd64, with touchscreen I can touch drag one card at once using Interactjs.io, and with Brave many cards at once. I'm looking at Ladybird source code, where is drag related code, to look would it be possible to add MultiDrag, and currently I'm compiling newest Ladybird.

MultiDrag test page here:

https://wekan.github.io/multidrag/

BR, xet7 Maintainer of WeKan Open Source kanban https://wekan.github.io

[ADKaster]

@xet7 that would be great! We currently implement the dnd parts of the HTML spec in Libraries/LibWeb/Page/DragAndDropEventHandler.cpp

That's where things like https://html.spec.whatwg.org/multipage/dnd.html#fire-a-dnd-event and https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model are currently partially implemented. It looks like there's a lot of FIXMEs for the start/end parts of these algorithms.

The DragAndDropEvent is sent from the UI process to the Web::Page to eventually get to Web::Page::EventHandler::handle_drag_and_drop_event.

I wasn't able to really find anything on what "MutliDrag" is though, is that a WIP specification? or a description of a pattern normally implemented in JS library code?

[xet7]

@ADKaster

MultiDrag is term I use, but I don't know is there any definition at any spec, I have not looked yet. It's about Multiple Drag, like dragging many cards at once. I have seen it only at https://interactjs.io as Javascript.

It depends on each touch screen, how many touch points it has. Original demo at https://interactjs.io has 2 moveable cards, but by changing code, I added 2 more cards to demo at https://wekan.github.io/multidrag/ . There could be even more cards, by adding to code, although it's limited by how many touch points each touch screen supports.

[xet7]

@ADKaster

That MultiDrag demo that uses InteractJS works at Ladybird, with dragging only one card at once. Dragging 2 or more cards at once does not work at Ladybird. It works in other browsers, like Brave etc.

Current Meteor 2 WeKan uses JQuery UI draggable/droppable, but Meteor 2 WeKan has too much Javascript currently (about 10 MB browserside), it does not load at Ladybird.

For drag/drop, I also tried to load webpage of SortableJS https://sortablejs.github.io/Sortable/ , but demos there did not work.

Of those I have tested, only InteractJS works.

[xet7]

Currently there seems to be some errors like these:

110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.translate'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.translate'
110592.305 WebContent(143866): FIXME: Implement HTMLElement::access_key_label()
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.draggable'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.draggable'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.spellcheck'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.spellcheck'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.autocapitalize'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.autocapitalize'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.autocorrect'
110592.305 WebContent(143866): FIXME: Unimplemented IDL interface: 'HTMLElementPrototype.autocorrect'
110592.312 WebContent(143866): (js warn) "
[interact.js] Consider adding CSS "touch-action: none" to this element\n"
HTMLTableElement{ "caption": null, "tHead": null, "tFoot": null,
"tBodies": HTMLCollection{ "0": HTMLTableSectionElement{ "rows": HTMLCollection{ "0": 
HTMLTableRowElement{ "rowIndex": 0, "sectionRowIndex": 0, "cells":.....
"keys": [NativeFunction] , "values": [NativeFunction] , "forEach": [NativeFunction]  }
"https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action"

[jogibear9988]

I tried with my web component designer, there the D&D does not yet work. (https://node-projects.github.io/web-component-designer-demo/index.html) (cause of wich I also started this issue)

But the Designer also does not show the design surface since a few months (worked before...)

[xet7]

I'm currently trying to do accessible kanban that works in all browsers.

Here is some accessible drag drop example: https://salesforce-ux.github.io/dnd-a11y-patterns/

That link is also at WeKan accessibility issue: https://github.com/wekan/wekan/issues/459#issuecomment-860259827

I'm also trying to make drawing lines between cards possible: https://github.com/wekan/wekan/issues/3392 . Related to that, there is also RaphaelJS, that I mentioned at https://github.com/wekan/wekan/issues/3392#issuecomment-1296475023 , for example curves demo https://dmitrybaranovskiy.github.io/raphael/curver.html at https://dmitrybaranovskiy.github.io/raphael/ . RaphaelJS uses VML for IE and SVG for other browsers. I have collected some RaphaelJS related repos to https://github.com/raphaeljsorg