Can't get options to work

I suppose I’m overlooking something obvious, but I simply can’t get options to work.

I have a vue2 project containing a simple drag and drop which allows reordering items in a list:

<div id="drag-container" v-dragula="items" bag="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>

Drag and drop works fine, but I want to allow dragging only via specific handle. I can use the moves option of dragula to control that, but I can’t get it working in vue2-dragula. I tried things like:

Vue.$dragula.$service.options('items', {
  moves: function (el, source, handle, sibling) {
    console.log('moves', el);
    return el.classList.contains('drag-handle')
  }
})

and

  beforeMount: function () {
    this.$dragula.$service.options('items', {
      moves: function (el, source, handle, sibling) {
        console.log('moves', el);
        return el.classList.contains('drag-handle')
      }
    })
  },

But the moves function is never invoked. Any idea what I’m overlooking?

[kristianmandrup]

Great to hear! I’ve added it to the new Wiki page with usage examples

Feel free to help improve the library and the docs!

[josdejong]

Ok managed to get it working (starting from one of the working examples from the demo app). 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: {}
    })
  },

Thanks for your help Kristian.