Vue.draggable: Specify draggable area

[musayann]

is there any way to restrict like the dragging area?

[David-Desmaisons]

What do you mean?

[JelleScheer]

Right now the draggable item (draggable=".item") should be a direct child of the wrapper, but there are cases where you don't want the entire child to trigger the drag but for example let an icon inside the item initiate the dragging, like so:

<draggable draggable=".drag-starter">
   <div class="item">
      <i class="some-icon drag-starter"></i>
   </div>
</draggable>

[Electrofenster]

@JelleScheer nope, this don't work:

<draggable v-model="contentItems" draggable=".drag-starter">
  <div v-for="contentItem in contentItems" class="item">
    <i class="some-icon drag-starter">aaa</i>
    {{ contentItem.headline }}
  </div>
</draggable>

it works when I use handle instead of draggable see: https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/handle.vue

[musayann]

@JelleScheer nope, this don't work:

<draggable v-model="contentItems" draggable=".drag-starter">
  <div v-for="contentItem in contentItems" class="item">
    <i class="some-icon drag-starter">aaa</i>
    {{ contentItem.headline }}
  </div>
</draggable>

it works when I use handle instead of draggable see: https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/handle.vue

This works thanks, handle does the trick