kyythane/svelte-reactive-dnd

A drag and drop library for Svelte

svelte-reactive-dnd's Issues

Reduce Layout Thrash

• Update cachedRects to maintain padding info directly, so hoverCallback doesn't read from styles
• Remove removePaddingFromRect and pixelStringToNumber

Improve collision detection

Implement a improvements similar to: https://dev.to/alexandereardon/overhauling-our-collision-engine-962
Should be done after #1

Overrides for Placeholder item being dragged

Allow the user to provide a template for the placeholder item.

API docs

• DropList
• DragHandle
• DropGroup
• dragDropSettings

`isDraggingOver` results are unituative

These should only highlight pink when the dragged item overlaps: https://svelte.dev/repl/e25569ee35c046af8b98c1650a264ba6?version=3.24.1

Test replacing padding with translate to reduce layout

Since we are now using cached bounding rects, there is no especially pressing reason to use padding. Experiment with switching to transform.

When inserting an item in a list with one element, the item is inserted at the top if no overlap is detected

Enable Multi-Drag

It should be possible to pass an array of ids into handleMouseDown.

• Refactor dragTarget to handle multiple simultaneous items
• DropGroups will need to be able to return multiple sourceResults.
• Animations
• Expose global settings for capping number of animated dragTargets

Fix scrollbar rendering on Windows in examples

Examples

• Investigate Storybook
• Make examples in REPL, link from docs

Allow user to set `id` key

• add idField parameter to defaults that defaults to id
• add idField property to DropList
DropGroup should probably be able to take some kinds of config:
• add idField to DropGroup
• Evaluate other configs.
• Evaluate making DropGroup insert a store into the context

DragHandles expect keys to be unique between DropGroups/keys

• DragHandles accept optional key
• DragHandles inherit key from DropGroup

Collapsing the space the item was dragged from too early causes unintuitive interactions.

Letting the space the dragging item originate from collapse before it is dragged away can cause weirdness around what the first candidate drop position should be.

Proposal: still collapse the div, but populate currentlyDraggingOver with that initial space.

Enable Tests

• Setup Jest
• Setup Cypress
• Write basic set of integration tests
• Break out testable pieces from DropList
• Break utilities into more cohesive modules.

Fill out Readme

• Installation
• About
• Quick start
• Links to API docs

Keyboard controlls

Should work similarly to: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/sensors/keyboard.md