Events

Events affecting more than on cotrollers are emitted on both scopes if provided.

EventsCtrl

Move me, but you can only drop me in one of these containers.
If you try to drop me somewhere other than these containers, I'll just come back.
Item 3.
Item 6.
You can drop me in the left container, otherwise I'll stay here.
Item 4.
Item 5.

Events2Ctrl

Move me, but you can only drop me in one of these containers.
If you try to drop me somewhere other than these containers, I'll just come back.
Item 3.
Item 6.
You can drop me in the left container, otherwise I'll stay here.
Item 4.
Item 5.
        
var EventsCtrl = function ($scope, $element, dragularService, $timeout) {

  var drake = dragularService($element.children(), {
    scope: $scope
  });
  $scope.$on('dragulardrag', function(e, el) {
    e.stopPropagation();
    el.className = el.className.replace(' ex-moved', '');
  });
  $scope.$on('dragulardrop', function(e, el) {
    e.stopPropagation();
    $timeout(function() {
      el.className += ' ex-moved';
    }, 0);
  });

  $scope.$on('dragularcloned', myFn('cloned in EventsCtrl'));
  $scope.$on('dragulardrag', myFn('drag in EventsCtrl'));
  $scope.$on('dragularcancel', myFn('cancel in EventsCtrl'));
  $scope.$on('dragulardrop', myFn('drop in EventsCtrl'));
  $scope.$on('dragularremove', myFn('remove in EventsCtrl'));
  $scope.$on('dragulardragend', myFn('dragend in EventsCtrl'));
  $scope.$on('dragularshadow', myFn('shadow in EventsCtrl'));

  function myFn(eventName) {
    return function() {
      console.log(eventName, arguments, drake);
    };
  }
};

var Events2Ctrl = function ($scope, $element, dragularService, $timeout) {
  var drake = dragularService($element.children(), {
    scope: $scope
  });
  $scope.$on('dragulardrag', function(e, el) {
    e.stopPropagation();
    el.className = el.className.replace(' ex-moved', '');
  });
  $scope.$on('dragulardrop', function(e, el) {
    e.stopPropagation();
    $timeout(function() {
      el.className += ' ex-moved';
    }, 0);
  });

  $scope.$on('dragularcloned', myFn('cloned in Events2Ctrl'));
  $scope.$on('dragulardrag', myFn('drag in Events2Ctrl'));
  $scope.$on('dragularcancel', myFn('cancel in Events2Ctrl'));
  $scope.$on('dragulardrop', myFn('drop in Events2Ctrl'));
  $scope.$on('dragularremove', myFn('remove in Events2Ctrl'));
  $scope.$on('dragulardragend', myFn('dragend in Events2Ctrl'));
  $scope.$on('dragularshadow', myFn('shadow in Events2Ctrl'));

  function myFn(eventName) {
    return function() {
      console.log(eventName, arguments, drake);
    };
  }
};