I have a playlist listing div that I want to be able to drop another div with an image representing a video into the playlist, where dropping it anywhere will fire a modal which will allow the user to create a new playlist (a child div) with the resource dragged and dropped into the playlist listing div as a part of the new playlist. I also want to be able to have the user drag and drop the resource directly into the playlist, which adds that resource to the playlist, but does not fire the modal to create a new playlist.
This is not possible within the current implementation of event handler binding by the droppable widgets since it uses an array with the order of the callbacks bound being the determining factor as to the order. This is compounded by my usage of AngularJS, since the order directives are compiled, and thus the order the droppable bindings occur, are dictated by the order they appear in the DOM. Ideally, I would like to be able to tap into controlling the order of events present in the jQuery-wrapped event object, but given the implementation of the event handling in the droppable widget, I have subbed a pull request with a proposed fix that offers more control over the ordering based on how deep the element the callbacks are bound to is in the DOM. Combined with the greedy option, this should address the issue of nested callbacks.