Ng-click not working dragula drag-drop elements

Question

Using dragula plugin (Angular 1) link

ng-click not working moved (drag and drop to another ul) on li element

<ul dragula='"second-bag"'>
   <li ng-click="fun()">Item One </li>
   <li ng-click="fun()">Item Two</li>
   <li ng-click="fun()">Item Three</li>
   <li ng-click="fun()">Item Four</li>
</ul>
<ul dragula='"second-bag"'>
   <li ng-click="fun()">Item One </li>
   <li ng-click="fun()">Item Two</li>
   <li ng-click="fun()">Item Three</li>
   <li ng-click="fun()">Item Four</li>
</ul>

app.controller('ExampleCtrl', ['$scope', function ($scope) {
   $scope.fun = function(){
          alert('test');
   } 
}]);

Answer 1

It is probably the expected behaviour of dragula, becouse in order to drag the element you are actually clicking it.

---

The important part is why do you want to listen the clicking event of an dragula list element? If the answer is to manipulate that particular element or do another operation, dragula gives you a set of opportunities.

<div dragula='"sixth-bag"'></div>
<div dragula='"sixth-bag"'></div>

app.controller('MuchExampleCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) {
    dragulaService.options($scope, 'sixth-bag', {
      moves: function (el, container, handle) {
        return handle.className === 'handle';
      }
    });
  }
]);

In this example, you are changing the className of the "handled" element. Similar to this, you can use this approach for other possible outcomes.

Links:

• http://bevacqua.github.io/angular-dragula/
• https://github.com/bevacqua/dragula#optionsmoves

Also as an alternative you might want to checkout the service ngDraggable for more "Angular1 style" syntax.

• ngDraggable: https://github.com/fatlinesofcode/ngDraggable