annaghi/dnd-list

Drag and Drop for sortable lists in Elm web apps with mouse support

dnd-list's Issues

How to detect a drop?

Thanks for this great component.

I would like to know if there is a way to trigger an action when an item is dropped.

Question: Is elm notation "Html" instead of "HTML" implying "DnDList should be "DndList" ?

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)

How do i dnd on tree list?

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 ?

Compiling with create-elm-app gives error with import:

I made a new project with create-elm-app, and did a near copy-paste of the examples in your documentation, but I get this error in my code:

Add touch support

Maybe this would be possible by using elm-pointer-events instead of mouse events directly? This could also remove some manual decoding

Getting stuck on drag

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.

Consider the option to use drag events instead

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.

Ghost Style positioning not centered to mouse & z-index wrong?

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)

Possible API refactoring

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.

  • Another example is that I want to include a certain action when the drop is executed (transferring an item between two different groups): The action is to sync back the dnd list (which is flat) to the actual datastore (which isnt flat), so I imagine that is a pretty common operation.
  • Possible solution: pass in the low-level dnd config to the higher level dndList one, so people could customize that one? Could also serve as sophisticated replacement for the beforeUpdate hook.
  • Alternative solution: ir4y/elm-dnd like basic functionality, but helpers for lists added on top.

• config for groups might deserve a more tailored structure?

  • it confused me why operation is in there twice.
  • maybe Config { insideGroup = { }, acrossGroups = { } } would mark that difference in structure?
  • "comparator" and "setter" are terms common in other languages (mostly OOP ones). Still I think in this place a distinct name could make it a bit easier to grasp? Like "isSameGroup" or "changeGroupOp"? Might also be dissolved by clearer docs.

Come alive, v5!

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

Various possible Docs enhancements

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"

  • also they should not be mentioned everywhere. It is not a nice addition that they are required, it is a "bug"/restriction. So that should be clearly marked. ("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

  • in the beginning section there is always a recipe of user-code copied from the example. But that requires deep understanding of the previous code of the example.
    • instead it could be done as follows: crisp explanation of the function, showing an example input+output, explaining the reasons why the function is required, then showing where to put it into user code
  • the doc uses a "read it all or die" approach, instead of a lookup on need.
  • Imo it would be much more helpful if e.g. the fields of a type are inline commented. And also if the sections of the initial doc would directly be put next to the code. no need in copying the example imo, otherwise people can read the DndList.Group example instead.

• "update"

  • "and the sorted list in the model": it is user responsibility where to keep the list. they should put it in the model, but thats an additional hint given after the explanation. Suggestion: "..and the resorted list of items. These should be saved back to your model and used for the next call to DndList.update."

• dragEvents

  • the example is missing the explanation what the example does.
    • e.g: the dragevents are only attached when there is no dragging going on! same for the dropevents are only attached when there is a dragging going on. 1) why? 2) explain!
  • there is no shorthand description of what "dragEvents" is:
    • given the html of a node and the index in the flat list across all groups, it returns for that item the list of events HTML Attributes, making that item dragable.

• dropEvents

  • why is there a footer needed? please explain! (and when)
    • "a footer is needed, so you can drag items to the end of the group. Imagine it like an invisible placeholder to serve as the target zone, to allow a drop at the end of a list when the operation would be "add the item before the item hovered on drop". Similarily a header placeholder is needed for "insertAfter" operations. Also it is required for empty lists."• example for adding a custom ghoststlye does not work
  • currentPosition should be used.

• why is the main example adding new sections like "---- SYSTEM ---- "?

  • Might just be bc I am such an elm-newbie, though. But for me it was hard to sectionize this afterwards, bc i was unsure whether i also need to add this new section now. Also I didnt see the term "system" before used in elm.
  • Maybe also this could be renamed to "dndSystem" throughout the docs, to signal that this is a special thing for the library.
  • My feeling is, that this System concept can maybe be simplified with a different API, but I also do not have a better idea. I mean the purpose of having the user create the system, instead of hiding it behind the curtains of the module is adding complexity. I know the reason is to allow independent dnd lists, where items can not be transferred betwen those lists. Maybe take inspiration of the style ir4y/elm-dnd does it? (Although that one is limited in functionality, maybe more code for lists could actually be emulated with specially provided dragMeta-dropMeta records and some separate helper tools?)

• 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