angularjs drag and drop plugin drop issue

Question

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: enter image description here

Langdon · Accepted Answer · 2013-09-08 04:27:07Z

4

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

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

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

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

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

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

answered Sep 8, 2013 at 4:27

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Varand Pezeshkian Over a year ago

OMG it workedddddd... I don't know how to thank you sir. it's very strange I was not getting any error on drop. check out my question i posted the snapshot of the console without any error. Many Thanks.

Varand Pezeshkian Over a year ago

So that means even though I'm not binding any model to my list I still need to declare dummy model?

Langdon Over a year ago

Yea seems like ngModel is required, which is kind of weird.

bluehallu Over a year ago

Took me 2 hours of debugging to get here. Thank you.

Paflow · Accepted Answer · 2015-05-02 10:38:15Z

0

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.

answered May 2, 2015 at 10:38

Paflow

2,3975 gold badges34 silver badges58 bronze badges

Collectives™ on Stack Overflow

angularjs drag and drop plugin drop issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related