By default, dropping an element outside of any known containers will keep the element in the last place it went over. You can make elements go back to origin if they're dropped outside of known containers, too.

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>

class SuchExample {
  constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('fourth-bag', {
      revertOnSpill: true
    });
  }
}