javascript - angularjs drag and drop plugin drop issue - Stack Overflow

admin管理员组

文章数量:1334336

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

Share Improve this question Follow edited Sep 8, 2013 at 8:39 Varand Pezeshkian asked Sep 8, 2013 at 1:50 Varand PezeshkianVarand Pezeshkian 52022 gold badges1111 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptangularjs drag and drop plugin drop issueStack Overflow