annaghi / dnd-list Goto Github PK
View Code? Open in Web Editor NEWDrag and Drop for sortable lists in Elm web apps with mouse support
Home Page: https://annaghi.github.io/dnd-list/
License: BSD 3-Clause "New" or "Revised" License
Drag and Drop for sortable lists in Elm web apps with mouse support
Home Page: https://annaghi.github.io/dnd-list/
License: BSD 3-Clause "New" or "Revised" License
As discussed in slack I shortly write down my review suggestions reading the docs.
Already mentioned: the reason I write this is, that for me as novice user (without any dnd background) It was a bit missing the implicit knowledge domain experts have here.
be proud of the fact that HTML5 dnd is not used! clearly mark why this is not done and the advantages this lib brings with it, thanks to this implementation detail. (see the elm-pointer-events docs which link an interesting article complaining about html5 dnd)
"auxiliary items" -> keep it simple: "helper items"
"The nature of drag and drop implementations like ours, which is based on dropzone, requires that either at the end or at the beginning an additional item must be placed, serving as a placeholder. Otherwise it would not be possible to place.."
)the doc is separate from the code.. imo that makes it a bit hard to read in the sense that its "hard to inspect the actual type definitions" and the actual code when reading the doc.
the doc examples are not self-contained
"update"
dragEvents
dropEvents
why is the main example adding new sections like "---- SYSTEM ---- "?
config: explain when the provided operations (comparator, setter) are executed. For me this was only clear after reading the source code. and only after realizing that placeholder items are needed for the groups, to give the guarantees for those functors.Other
Thanks for this great component.
I would like to know if there is a way to trigger an action when an item is dropped.
Specifically, using ondragstart
instead of onmousedown
for the DragStart event. Although users would have to specify the draggable
attribute on their elements (which is why it should be optional), it would allow users to handle the onclick
event on the draggable element. Currently, handling a click on the drag handler isn’t possible because onmousedown
always fires first.
Hi,
I am very excited coming across this package, it's well crafted, as reading the documentation i m a bit stuck on drag-and-drop on tree of list or elements (nested lists).
can you please share some insight about it ?
As mentioned in slack, I just took some notes for myself reading through the code (where I also learnt a lot!) and afterwards thought I could share them here :)
It would be nice to have a mix of the lower-level API used internally (e.g. The Msg type) also exposed, so that the same dnd system can be used for both. E.g. when I drag an item onto the headline of the list, it might be included at the end of the list.
config for groups might deserve a more tailored structure?
operation
is in there twice.Having a strange situation.
I have already 3 sections where I use dnd in my app.
They work fine and independently.
I made a 4th one, following exactly the same pattern, and for some reason, as soon as I drag an item, it gets stuck and there are thousands of Msg emitted.
I've been checking everything for a few hours, cannot understand why.
Does anyone have any idea?
Thank you.
Hi Anna,
I'm eagerly awaiting v5, since I'd like to perform operations only after a drop has been performed. How close are we to publishing v5?
David
Maybe this would be possible by using elm-pointer-events instead of mouse events directly? This could also remove some manual decoding
it confused me that "DnDList" is not called "DndList".
I thought that elms naming convention is ignoring that stuff is an uppercase abbrevation and instead camelcases everything.
Led to some mixed style in my user code (sometimes "DnDItem", sometimes "DndItem". Of course easily spotted by the compiler though)
the ghoststyles do not include
∘ the offset of the mouse click to the upper left corner of the item
∘ z-index (so artifacts appear like dragging the item "behind" another item)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.