angularjs drag and drop plugin drop issue


I'm using angular-dragdrop.js lib in my project and I have issue with drop callback function. All the other callback functions are working. I debugged my code many times but can't find the answer, has someone encountered with this issue?

here is my html and js code:


<li class="li-draggable" data-drag="true"
           jqyoui-draggable="{animate: true, 
                              placeholder: 'keep', 
                              onStart: 'startCallback', 
                              onStop: 'stopCallback',
                              onDrag: 'dragCallback'}"
           data-jqyoui-options="{snap: true, cursor: 'move', revert: 'invalid', helper: 'clone'}">
           <a>Text <i class="icon-pencil pull-right"></i></a>
<div class="dummyCell" data-drop="true"
             jqyoui-droppable="{multiple: true,
                               onDrop: 'dropCallback',
                               onOver: 'overCallback',
                               onOut: 'outCallback'}"
             data-jqyoui-options="{hoverClass: 'hoverClass'}"></div>


$scope.startCallback = function(event, ui) {
    console.log('You started draggin');

$scope.stopCallback = function(event, ui) {
    console.log('Why did you stop draggin me?');

$scope.dragCallback = function(event, ui) {
    console.log('hey, look I`m flying');

$scope.dropCallback = function(event, ui) {
    console.log('hey, doneeeeeee');

$scope.overCallback = function(event, ui) {
    console.log('Look, I`m over you');

$scope.outCallback = function(event, ui) {
    console.log('I`m not, hehe');

Any help will be appreciated. thanks.


I was not getting any error in console when dropped: enter image description here

Problem courtesy of: Varand Pezeshkian


The answer you're looking for: ngModel is required. Troubleshooting details below...

The combination of your options are throwing some weird error Syntax Error: Token '=' implies assignment but [undefined ] can not be assigned to at column 11 of the expression [undefined = __dragItem] starting at [= __dragItem].

Starting from a fresh example, onDrop does indeed work:

If you break it down to nothing, it still throws the error:

I think ngModel might be required, because as soon as you add it, the error goes away:

And adding it back to your original code, it seems to work now:

Work as it, I see hey, doneeeeeee in the console... not sure what your goal is with the UI though.

Solution courtesy of: Langdon


Had the same problem, but used ng-model. Took me hours to realize, that I was using an old angular version (1.0.1) for some reason and that this was the reason why onDrop didn't work while onDrag did. Maybe this is useful for someone.

Discussion courtesy of: Paflow

This recipe can be found in it's original form on Stack Over Flow.