Drag-over events

You can interact with dragging element by litening to dragOver events. Usually you want to containers show wheather they accepts element or not, but you can use it anywhere. DragOver events are: dragenter, dragleave and dragrelease. On dragOver events dragularService reveals several useful properties.

dragularService.shared.item item beeing dragged (it is copy of item if copy is enabled via options)
dragularService.shared.source source container item is dragged from
dragularService.shared.sourceModel source container model representation if model was porvided
dragularService.shared.initialIndex original index of item, can be used to get item model from sourceModel
dragularService.shared.extra contains accepting information (boolean) on dragenter, element drag is leaving to on dragleave and element behind the cursor on dragrelease

Try to drag over the not-container too.

apples and oranges cannot be mixed
apple 2
apple 3
apple 4
orange 1
orange 2
orange 3
orange 4
apple 5
apple 6
apple 7
apple 8
orange 5
orange 6
orange 7
orange 8
Test active class on NOT container.
    
<!-- HTML -->
  <div class='wrapper' ng-controller="DragOverEvents">
    <div class='container width25'>
      <div>apples and oranges cannot be mixed</div>
      <div>apple 2</div>
      ...
    </div>
    <div class='container width25'>
      <div>orange 1</div>
      <div>orange 2</div>
      ...
    </div>
    <div class='container width25'>
      <div>apple 5</div>
      <div>apple 6</div>
      ...
    </div>
    <div class='container width25'>
      <div>orange 5</div>
      <div>orange 6</div>
      ...
    </div>
  </div>
  <div class="notContainer"> Test active class on NOT container.</div>
    
  
    
  // CSS
  
.notContainer.gu-over {
  background-color: yellow;
}

.containerVertical.gu-over-accept {
  background-color: green;
}

.containerVertical.gu-over-decline {
  background-color: red;
}
    
  
    
  // JS
  controller('DragOverEvents', ['$element', 'dragularService', function TodoCtrl($element, dragularService) {
    dragularService.cleanEnviroment();
    dragularService([$element.children()[0], $element.children()[2]], {
      nameSpace: 'apples'
    });
    dragularService([$element.children()[1], $element.children()[3]], {
      nameSpace: 'oranges'
    });

    // containers events handling
    function registerEvents(el) {
      el.on('dragularenter', function(e) {
        if (el[0] === e.target) { // filter bubbled
          el.addClass(dragularService.shared.extra ? 'gu-over-accept' : 'gu-over-decline');
        }
      });
      el.on('dragularleave dragularrelease', function(e) {
        if ((el[0] === e.target && // filter bubbled
          dragularService.shared.extra && // extra on dragleave contains element the drag is leaving to
          dragularService.shared.extra.parentElement !== e.target) // is that element child of this container?
          || e.type === 'dragularrelease') {
          el.removeClass('gu-over-accept');
          el.removeClass('gu-over-decline');
        }
      });
    }

    angular.forEach($element.children(), function forEachChild(el) {
      registerEvents(angular.element(el));
    });

    // notContainer events handling
    var notContainer = angular.element(document.getElementsByClassName('notContainer'));
    notContainer.on('dragularenter', function() {
      notContainer.addClass('gu-over');
    });
    notContainer.on('dragularleave dragularrelease', function() {
      notContainer.removeClass('gu-over');
    });
  }])