Search code examples
vue.jsvuejs2vue-componentrubaxa-sortable

vue draggable almost works

I am using vue draggable. In my example I am trying to drag an some HTML by an element with a specific class.

<draggable :list="list" class="dragArea" :options="{draggable:'.dragg-me'}">
  <div class="draggable" v-for="element in list">
    <div class="dragg-me">dragg me</div>
    <div class="element">
      {{element.name}}
    </div>
  </div>
</draggable>

Here is the full example.

I need to be able to drag by the div with the dragg-me class, but that is not working. Nothing happens when I do that. If I omit :options="{draggable:'.dragg-me'}" or if I set it to 

draggable:'.draggable'

then of course it works again.

Is it possible to get it working the way I would like to?

Solution

  • Use a handle, documented here.

    <draggable :list="list" class="dragArea" :options="{handle:'.dragg-me'}">

    Here is your fiddle updated.