Vue.draggable: don't hard-code "div" as outer element

Created on 27 Oct 2016 · 8Comments · Source: SortableJS/Vue.Draggable

Currently, Vue.Draggable only allows to drag and drop div elements which get enclosed in an outer div. But sometimes, one might want to drag and drop li inside a ul or ol, or tr inside a tbody.

So, it would be nice if one could configure if a div element is created as outer element for the draggable objects, or something else like a ul or tbody.

Source

mrieser

Most helpful comment

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.

mrieser on 28 Oct 2016

👍5 ❤3

All 8 comments

Good suggestion! I will work on it!

David-Desmaisons on 27 Oct 2016

added element prop in version 2.2.0.

David-Desmaisons on 28 Oct 2016

cool, thanks for the fast work!

mrieser on 28 Oct 2016

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>

<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.

mrieser on 28 Oct 2016

👍5 ❤3

@mrieser Thanks for documenting this!

David-Desmaisons on 28 Oct 2016

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!!!

JeffB1 on 14 Feb 2017

@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

David-Desmaisons on 14 Feb 2017

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...