don't hard-code "div" as outer element about vue.draggable HOT 8 CLOSED

I could try the new version out now, works very well, thanks again!

Just for a documentation purpose: Using <draggable element="ul"...>...</draggable> works just out of the box. But the following did not work:

<table>
  <thead>...</thead>
  <draggable element="tbody" ...>...</draggable>
</table>

I finally figured it out, and it's actually documented over at VueJS: https://vuejs.org/guide/components.html#DOM-Template-Parsing-Caveats. Basically, custom components cannot be used within <table>. But the workaround using is works:

<table>
  <thead>
    <th>Id</th>
    <th>Name</th>
  </thead>
  <tbody is="draggable" element="tbody" :list="items">
    <tr v-for="i in items">
      <td>{{i.id}}</td>
      <td>{{i.name}}</td>
    </tr>
  </tbody>
</table>

I just wanted to have this documented here, in case somebody ends up here after a quick internet search and tries to do the same as I did.

from vue.draggable.

Good suggestion! I will work on it!

from vue.draggable.

added element prop in version 2.2.0.

from vue.draggable.

cool, thanks for the fast work!

from vue.draggable.

@mrieser Thanks for documenting this!

from vue.draggable.

You should consider adding this to either the readme.md or as a sample. I struggled with this for a while until I found this issue and then it worked straight away. Happy days now!!!

from vue.draggable.

@JeffB1 I would have to take a look deeper to this to really understand it and add it to readme.md.
Please open a PR with the updates you are suggesting so I can review and merge them

from vue.draggable.

I don't know why, but using <draggable element="tbody"... > (as demonstrated in documentation) does not work, while <tbody is="draggable" ...> works. There is nothing wrong with data presentation, only the "drag" does not work!

P.S. All JSFiddle in vue-draggable does not work on my machine. I am not sure whether it is a network problem, or a machine-related problem...

from vue.draggable.