Angular.js angular-dragdrop custom callback function not found

I am using this plugin with Angular. The documentation says that

the onDrop callback method, which should be called by the drag and drop, is discarded in droppable

so I tried using it like this (the corresponding part is 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 in the field as follows:

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

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

As you can see from Plunker, this does not work, for some reason the callback function was not found (it does not look at the scope, maybe?).

I tried several variations of this, for example onDrop="myCallback(event, ui)" or onDrop="myCallback" , etc. None of this succeeded.

Is this a mistake or am I just not using it correctly?

Thanks in advance.

+6
source share
1 answer

Based on the examples, I saw that you are doing it wrong.

  • onDrop Callback must be declared in jqyoui-droppable

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

But look @ this for more complete code here

Decision

Plunkr

Lil mistake, although it throws the first 2 items and nothing more, but this should help you on your way. Update: I just noticed that you have a limitation, stupid me. In this case, he decided

+10
source

Source: https://habr.com/ru/post/951060/


All Articles