Drag and Drop Problem

Question

I am using angular-dragdrop.js lib in my project and I have a problem with the drop callback function. All other callback functions work. I debugged my code many times, but I can’t find the answer, has anyone encountered this problem?

here is my html and js code:

HTML:

<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> </li> <div class="dummyCell" data-drop="true" jqyoui-droppable="{multiple: true, onDrop: 'dropCallback', onOver: 'overCallback', onOut: 'outCallback'}" data-jqyoui-options="{hoverClass: 'hoverClass'}"></div> 

JS:

 $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 would be appreciated. thanks.

Updated:

I did not get console errors when uninstalling:

Answer 1

The answer you are looking for is: ngModel . Troubleshooting below ...

The combination of your options throws some weird Syntax Error: Token '=' implies assignment but [undefined ] can not be assigned to at column 11 of the expression [undefined = __dragItem] starting at [= __dragItem]. http://jsfiddle.net/RWgX9/

Starting with a new example, onDrop really works: http://jsfiddle.net/HsNRS/

If you break it to zero, it still throws an error: http://jsfiddle.net/RWgX9/1/

I think ngModel may be required, because as soon as you add it, the error will disappear: http://jsfiddle.net/RWgX9/2/

And adding it back to the source code, it now works: http://jsfiddle.net/RWgX9/3/

Work like that, I see hey, doneeeeeee in the console ... I don’t know what your goal with the user interface is.

Answer 2

Had the same problem but used an ng model. It took several hours to realize that I was using the old version of angular (1.0.1) for some reason and that it was for this reason that onDrop did not work during onDrag. Perhaps this is useful for someone.