Examples and recipes

Models

• single bag

Single bag

Not that the name of the service and drake should match with the created service, and the structure of the created service has to be correct.

<div id="drag-container" v-dragula="items" service="itemsService" drake="items">
    <div v-for="(item, index) in item" :key="item.id" class="row">
        <div class="col drag-handle">
          <div class="drag-icon"></div>
        </div>

        ... item contents here ...
    </div>
</div>

  created () {
    this.$dragula.createService({
      name: 'itemsService',
      drakes: {
        items: {
          moves: function (el, source, handle, sibling) {
            return handle.classList.contains('drag-handle')
          }
        }
      },
      options: {}
    })
  },