javascript - Angular.js angular-dragdrop custom callback function not found - Stack Overflow

admin管理员组

文章数量:1278912

I'm using this plugin with Angular. In the documentation it says that

onDrop callback method to be invoked a draggable is dropped into the droppable

so I tried using it like this (the relevant part is the onDrop="myCallback"):

<div class="thumbnail" data-drop="true" 
        onDrop="myCallback" ng-model='list1' 
        data-jqyoui-options="optionsList1" 
        jqyoui-droppable="{multiple:true}">
    <div class="caption">
        <div class="btn btn-info btn-draggable" 
              ng-repeat="item in list1" 
              ng-show="item.title" 
              data-drag="{{item.drag}}" 
              data-jqyoui-options="{revert: 'invalid'}" 
              ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}">                
        {{item.title}}
        </div>
    </div>
</div>

And defined the function on the scope like so:

$scope.myCallback = function(event, ui){
    console.log('Dropped into something');
};

As you can see from the Plunker, this doesn't work, for some reason the callback function isn't found (it's not looking on the scope perhaps?).

I have tried multiple variations of this, like onDrop="myCallback(event, ui)" or onDrop="myCallback" etc. None of these worked.

Is this a bug or am I simply not using it correctly?

Thanks in advance.

I'm using this plugin with Angular. In the documentation it says that

onDrop callback method to be invoked a draggable is dropped into the droppable

so I tried using it like this (the relevant part is the onDrop="myCallback"):

<div class="thumbnail" data-drop="true" 
        onDrop="myCallback" ng-model='list1' 
        data-jqyoui-options="optionsList1" 
        jqyoui-droppable="{multiple:true}">
    <div class="caption">
        <div class="btn btn-info btn-draggable" 
              ng-repeat="item in list1" 
              ng-show="item.title" 
              data-drag="{{item.drag}}" 
              data-jqyoui-options="{revert: 'invalid'}" 
              ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}">                
        {{item.title}}
        </div>
    </div>
</div>

And defined the function on the scope like so:

$scope.myCallback = function(event, ui){
    console.log('Dropped into something');
};

http://plnkr.co/edit/kiYrIU?p=preview

As you can see from the Plunker, this doesn't work, for some reason the callback function isn't found (it's not looking on the scope perhaps?).

I have tried multiple variations of this, like onDrop="myCallback(event, ui)" or onDrop="myCallback" etc. None of these worked.

Is this a bug or am I simply not using it correctly?

Thanks in advance.

• javascript
• jquery-ui
• angularjs
• jquery-draggable

Share Improve this question Follow edited Aug 6, 2013 at 9:23 adamors asked Aug 5, 2013 at 19:27 adamorsadamors 2,65655 gold badges3333 silver badges4646 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Based on the examples I've seen you're doing it wrong.

1. onDrop callback should be declared in jqyoui-droppable

   jqyoui-droppable = "{..., onDrop: 'myCallback', ...}"

But look @ this for a more plete code here

Solution

Plunkr

Lil bug though, it drops the first 2 items and nothing more but this should help you on your way. Update: I just noticed you had a limit placed on it, silly me. In that case, it's solved

本文标签： javascriptAngularjs angulardragdrop custom callback function not foundStack Overflow