yookoala/dragdrop-components

Web Components for Simple Drag and Drop Operations

dragdrop-components's Issues

Meta: Improve test coverages

Should cover

• expectation to touch-drag shadow (i.e. position).
• expectation to touch arrangement.
• expectation to multiple touch point.

A single right way to subscribe to changes

Need a way to assist state management of apps (e.g. Vue, Svelte) that works with both mouse event and touch event.

Baseline

• State management code should be able to subscribe to changes of adding / removing / reordering child in containers.
• Changes should look the same in both mouse and touch drag.

Additional Feature (Maybe)

• State management code could subscribe to the whole drag journey of child (start, move, stop).
• State management code could subscribe to the whole drag journey of container (leave, enter, drop).

Live demo needed

• Need to provide a live demo that users can try on browsers.
• Preferable by GitHub pages that built from examples directly.
• Probably an index page with description of the project, list and description of examples, and information of GitHub repo here.

Multiple touch drag support

Currently, multiple touch-dragging multiple items around is very messy. The drag shadows are moved along correctly, but the dropping by "touchend" is unspecified and chaotic.

Problem

• Currently we use DragDropContainer.getDraggedElement() to find the dragged element. This is not ideal because it doesn't really trackdown the touch / mouse event dragged target. The method only find the dragged element by attributes.
• Multi-touch "touchmove" event always indicates which touch is relevant to the target by the TouchEvent.targetEvents attribute.
• The mouse event target of "dragenter", "dragmove", "dragleave" and "drop" is quite chaotic and inconsistent. The event.target attribute do not always identify the mouse dragged target. That was why DragDropContainer.getDraggedElement() was written in the first place.

Solution

• For simulated events (i.e. CustomEvent of type "dnd:*"), event.detail.target should be accurate. Use it.
• For MouseEvent, use DragDropContainer.getDraggedElement() instead (?) (using "getDraggedElement()" will have issue when user simultaneously use mouse and touch). Or find a way to stably identify the drag target.

Better shadow element for touch drag event

• The current implementation only shows a semi-transparent dark rectangle (of same width and height of the dragged element).
• A better way would be to use image / element clone.

Possible Solution

Reference: https://github.com/pbakaus/domvas

Potential Problem with The Solution

The computation to create that shadow would be significantly higher (especially when need to do deep clone and computedStyle to a huge nested DOM element). Should make this optional through attribute.

Automatic npm publishing workflow

• Need to implement automatic npm publishing through GitHub Workflows.