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.
Based on the examples I've seen you're doing it wrong.
onDrop
callback should be declared in jqyoui-droppable
jqyoui-droppable = "{..., onDrop: 'myCallback', ...}"
But look @ this for a more complete code here
Solution
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