angularjs-dragula

Drag and drop so simple it hurts

Fork me on GitHub
Note: these examples mimic the ones for dragula, but using angularjs-dragula.
You can move these elements between these two containers
Moving them anywhere else isn't quite possible
There's also the possibility of moving elements around in the same container, changing their position
This is the default use case. You only need to specify the containers you want to use
More interactive use cases lie ahead
Make sure to check out the documentation on GitHub!
      
<div dragula='"first-bag"'></div>
<div dragula='"first-bag"'></div>
      
    
As soon as you start dragging an element, a drag event is fired
Whenever an element is cloned because copy: true, a cloned event fires
The shadow event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position
A drop event is fired whenever an element is dropped anywhere other than its origin (where it was initially dragged from)
If the element gets removed from the DOM as a result of dropping outside of any containers, a remove event gets fired
A cancel event is fired when an element would be dropped onto an invalid target, but retains its original placement instead
The over event fires when you drag something over a container, and out fires when you drag it away from the container
Lastly, a dragend event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop
      
<div dragula='"second-bag"'></div>
<div dragula='"second-bag"'></div>

app.controller('ExampleCtrl', ['$scope', function ($scope) {
  $scope.$on('second-bag.drag', function (e, el) {
    el.removeClass('ex-moved');
  });

  $scope.$on('second-bag.drop', function (e, el) {
    el.addClass('ex-moved');
  });

  $scope.$on('second-bag.over', function (e, el, container) {
    container.addClass('ex-over');
  });

  $scope.$on('second-bag.out', function (e, el, container) {
    container.removeClass('ex-over');
  });
}]);
      
    
Banana Boat
Orange Juice
Cuban Cigar
Terrible Comedian
Anxious Cab Driver
Thriving Venture
Calm Clam
      
<div dragula='"third-bag"'></div>

app.controller('AnotherExampleCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) {
    dragulaService.options($scope, 'third-bag', {
      removeOnSpill: true
    });
  }
]);
      
    
Moving items between containers works as usual
If you try to drop an item outside of any containers, though, it'll retain its original position
When that happens, a cancel event will be raised
Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers
This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises
      
<div dragula='"fourth-bag"'></div>
<div dragula='"fourth-bag"'></div>

app.controller('SuchExampleCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) {
    dragulaService.options($scope, 'fourth-bag', {
      revertOnSpill: true
    });
  }
]);
      
    
When elements are copyable, they can't be sorted in their origin container
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
Whenever that happens, a cloned event is raised
Note that the clones get destroyed if they're not dropped into another container
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
      
<div dragula='"fifth-bag"'></div>
<div dragula='"fifth-bag"'></div>

app.controller('VeryExampleCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) {
    dragulaService.options($scope, 'fifth-bag', {
      copy: true
    });
  }
]);
      
    
+Move me, but you can use the plus sign to drag me around.
+Note that handle element in the moves handler is just the original event target.
+This might also be useful if you want multiple children of an element to be able to trigger a drag event.
+You can also use the moves option to determine whether an element can be dragged at all from a container, drag handle or not.
      
<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';
      }
    });
  }
]);
      
    
There are a few similar mechanisms to determine whether an element can be dragged from a certain container (moves), whether an element can be dropped into a certain container at a certain position (accepts), and whether an element is able to originate a drag event (invalid).
Clicking on these elements triggers a regular click event you can listen to.
Try dragging or clicking on this element.
Note how you can click normally?
Drags don't trigger click events.
Clicks don't end up in a drag, either.
This is useful if you have elements that can be both clicked or dragged.
      
<div dragula='"seventh-bag"'></div>

app.controller('WowExampleCtrl', ['$scope', '$timeout',
  function ($scope, $timeout) {
    $scope.onclick = onclick;

    function onclick () {
      $scope.clicked = true;
      $timeout(function offclick () {
        $scope.clicked = false;
      }, 2000);
    }
  }
]);
      
    
{{many | json}}
{{many2 | json}}
      
<div class='wrapper'>
      <div class='container' dragula='"another-bag"' dragula-model='many'>
        <div ng-repeat='text in many' ng-bind='text'></div>
      </div>
      <div class='container' dragula='"another-bag"' dragula-model='many2'>
        <div ng-repeat='text in many2' ng-bind='text'></div>        
      </div>
    </div>

app.controller('RepeatCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) {
    $scope.many = ['The', 'possibilities', 'are', 'endless!'];
    $scope.many2 = ['Explore', 'them'];
  }
]);
      
    

Get it on GitHub! bevacqua/angularjs-dragula