search

reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
299 stars 118 forks source link

Duplicated element momentarily when ordering a list #36

Closed tiagomsmagalhaes closed 2 years ago

tiagomsmagalhaes commented 5 years ago

Describe the bug When adjusting the order of a list, the list has n+1 elements momentarily making it trigger other external components

To Reproduce https://stackblitz.com/edit/ngx-drag-drop-issue-template-tm

Steps to reproduce the behavior:

  1. Drag 2 items to the right
  2. Invert the order of the 2 items
  3. When it's drag ends, the length of the list is 3 very briefly before adjusting to 2. The extra element is the one that we dragged and changed de order. So if AB, after inverting it goes ABA and BA

Expected behavior Should never display an extra element when ordering a list

Desktop (please complete the following information):

reppners commented 5 years ago

Thanks for reporting and including a stackblitz for reproduction! Unfortunately the stackblitz resolves to its 404 error page. Can you verify if it?

I'm uncertain if the library can fix this without introducing a dedicated kind of sortable-list directive because the behavior you're observing is caused by the order of how the native drag/drop events are emitted which then are consumed by the dndDraggable and dndDropzone directives.

Introducing a dedicated directive would enable to implement some sort of mechanism to guarantee no duplicate elements being in the list when reordering items via drag and drop.

tiagomsmagalhaes commented 5 years ago

Can you try again? Or this one https://stackblitz.com/edit/ngx-drag-drop-issue-template-tm-awrzjs

Meanwhile I was able to solve half of the problem that recurring to setting timeout before I write the value. On the other side I had to use observables

reppners commented 2 years ago

I think this is just the way things are for loosely coupled draggables and dropzones with regards to the order of drag and drop events. If somebody needs a single reorderable list with the guarantee of no duplicates I suggest a wrapper component that handles the reordering logic and emits the reordered list after dndMoved.