Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dragEndAction is not called on successful drop #118

Open
gabrielgrant opened this issue Jan 10, 2018 · 7 comments
Open

dragEndAction is not called on successful drop #118

gabrielgrant opened this issue Jan 10, 2018 · 7 comments

Comments

@gabrielgrant
Copy link

gabrielgrant commented Jan 10, 2018

It seems that dragEndAction is only called when the drag ends unsuccessfully (ie not on a drop target), and dragCoordinator.currentDragObject is only updated in these cases too. This seems to mean that there's no straightforward way to track whether an object is actually currently being dragged.

Is this intended behavior? Is there some other way to know if a drag is in-progress?

In case it's relevant, I'm running Chromium Version 62.0.3202.94 (Official Build) Built/Running on Ubuntu

@dgavey
Copy link
Collaborator

dgavey commented Jan 10, 2018

dragEndAction should only fire on a successful drag. If you need to know if a drag is in progress use the dragStart action on the draggable-object component and track it in your own component.

@dgavey
Copy link
Collaborator

dgavey commented Jan 10, 2018

Sorry mis-read your comment. It should be working as intended. It should fire on a successful drop.

@dgavey
Copy link
Collaborator

dgavey commented Jan 10, 2018

Appears to be working in this demo -> http://mharris717.github.io/ember-drag-drop/#/simple

@gabrielgrant
Copy link
Author

gabrielgrant commented Jan 10, 2018

Thanks for the reply!
You seem to be right about the draggable-object's dragEndAction functionality working in that demo...which makes the behavior I'm seeing even more bizzare :P. Any idea what in my drop handler could be causing the dragEndAction to not fire? (as I said, fairly certain this isn't just a bug in my dragEndAction handler itself or anything: I'm not seeing any errors, and dragCoordinator.currentDragObject is not getting reset either

@gabrielgrant
Copy link
Author

gabrielgrant commented Jan 10, 2018

To confirm: it does seem to be something within my drop handler that is causing the problem: when I change the drop handler to return immediately, dragEndAction is fired and dragCoordinator.currentDragObject gets reset as expected

gabrielgrant added a commit to gabrielgrant/ember-drag-drop that referenced this issue Jan 17, 2018
If a drop action causes the draggable component instance to be
destroyed, the dragEnd event isn't fired, resulting in the
dragCoordinator being left in an inconsistent state (it thinks the
object is still being dragged). This change ensures the dragCoordinator
state gets cleaned up before the draggable-object is destroyed.

Note that this fix still won't result in the dragEndHook or dragEndAction
being fired: both of them are still only triggered if a browser dragEnd
event fires. It's not clear if they can be caused to fire in this
case without breaking the API, since both take the dragEnd event
as a parameter, which doesn't exist in this case.

This seems fine for dragEndHook, since it appears to mostly be used for DOM
changes/cleanup and this section of the DOM is going away, but it feels a
bit strange that dragEndAction wouldn't be fired.

Two possible options:
- send dragEndAction without an event
- add a new "dragFinally" action that gets called in both cases

Related to mharris717#118
@gabrielgrant
Copy link
Author

I've confirmed that the problem occurs when a drop handler causes a data change that in turn causes the dropped draggable-object component to be destroyed. It seems this happens because the browser drop event fires before the endDrag event. I'm clearly not well-enough versed in the Ember event loop internals: I'd thought that defer flushing the DOM changes would be deferred until the whole stack of events had fired, but that doesn't seem to be the case (or at least usually is not -- although it seems to happen fairly consistently in this (drop -> apply DOM changes -> endDrag) order, I think I may have observed a couple instances when it didn't. It's possible this was because the JS event loop fired off the endDrag event before returning control to glimmer's dom manipulation code, but I don't seem to be able to repro that right now, so it also could have just been me being mistaken.)

In any case, you can play with a MCVE here: https://ember-twiddle.com/155776d5af6dd8b662fea9a914921329

and I've submitted a PR that fixes my (that) immediate problem: #119

(it wasn't really obvious that this was the problem from my usage, because in my case i'm actually just re-arranging the underlying data, not removing anything entirely, so it took some ember-inspector-ing to realize that the updated underlying data structure was causing the component to be removed in one place and re-created in another)

@PrzemoRevolve
Copy link

I'm afraid your PR might break sortable-objects sorting between 2 lists. The current implementation removes the dragged element from one list and inserts int into the other on dragover (which is a bit hard to work with...). When it's removed it will trigger willDestroyElement, which calls your logic, and might break something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants