Class drag-border doesn't disappear on fast drag and drop

[dleric]

• I'm submitting a ... [x] bug report [ ] feature request [ ] other

• What is the current behavior? In the situation when I have multiple draggable and droppable elements, the class drag-border doesn't disappear when I'm dragging and dropping the elements very quickly.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar. The bug is hard to reproduce, but I discovered it's easier to notice it if in the file draggable.directive.js in setTimeout() in the function Draggable.prototype.dragStart(), I change 10ms to 1000ms (line 98). The bug even stays if I lower it to 1ms, but it's much harder to reproduce. I think I fixed the bug by removing setTimeout() and keeping only the content of the function (lines 96-97), but maybe I just made it harder to reproduce or I am unknowingly causing some other issues.

• What is the expected behavior? The class drag-border always disappears when drag ends.

• Please tell us about your environment:

• Angular version: 5.2.0

• Angular CLI Version: 1.6.4

• Browser: [ tested only on Chrome 63.0.3239.132 ]

[Oowaay]

Any news about this bug ? I got the same problem with nested drag / drop container .

In my case, I think it happen when I drop an item inside a drop container who is inside another drop container. Borders of the container where I drop the item are removed, but borders are not removed of the parent who include the other drop container.

On the screen I've dropped item "testp" on item "testeg" so testeg and testtes borders hint has shown , but whe, I've drop the item, only the testeg borders was removed.

Hope it will help to find the bug

[vmsoftware]

I have found a solution, however I don't know if it is the best aproach... however It works

I hope this help to any person in the future.

simply at the end of OnDrop function put:

var items = document.querySelectorAll(".drag-over-border");

for (let j = 0; j < items.length; j++) { items[j].classList.remove("drag-over-border"); }

This symply search for elements with that class and remove it.

[krishghosh]

Any updates on this bug? I have noticed that intermittently onDragEnd is not triggered and it that time when the dragClass and dragHintClass remain applied to concerned items.

[krishghosh]

Alright, this might be helpful for anybody who is facing this issue too. For me, the actual problem lies in my project itself and not the ng-drag-drop module.

What caused my issue was: I had a background task running, that in every few seconds updated the dom. Now this process momentarily block page (few milliseconds). Problem is that during this dom update, drag events are ignored. So for me if during that update process, dragend was triggered, it is never captured and hence ng-drag-drop is not even notified that the drag has ended, resulting in the drag and drop hint classes still being applied.

I fixed that part in my code and it works smooth.

So, make sure any such process is not scheduled in your application, which is causing the events to be lost. This doesn't seem to me as an issue with this library.