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:

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

Updated:

I was not getting any error in console when dropped:

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:

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

Updated:

I was not getting any error in console when dropped:

• javascript
• jquery
• angularjs
• drag-and-drop

2 Answers 2

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

The bination 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]. http://jsfiddle/RWgX9/

Starting from a fresh example, onDrop does indeed work: http://jsfiddle/HsNRS/

If you break it down to nothing, it still throws the error: http://jsfiddle/RWgX9/1/

I think ngModel might be required, because as soon as you add it, the error goes away: http://jsfiddle/RWgX9/2/

And adding it back to your original code, it seems to work now: http://jsfiddle/RWgX9/3/

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

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.