Vue.draggable: Tables

[Mat-Moo]

Ok, can't figure out why I can;t get a simple table to drag,drop?
https://jsfiddle.net/pe2q0qq7/
As soon as I simplify your version it stops working, but I can't work out why? I've tried a bunch of options using a whole host of things but to no avail? Any clues?

[philwig]

Well I just went the other way - took their example and then complicated it so I have n tables, with drag-drop between them. I'm no expert, but it works. Looking at your code you've "simplified" rather more than I could make work. I would go back to the original and modify it a line or two at a time, testing each change, so you can see what breaks it.

The reason this malarkey is required at all over a simple solution is that the table tags are interpreted by the browser, which ignores things in them which should not be there. That is in the docs somewhere.

The reason the demo has two nested children is (I'd guess) that there are two specific levels of tag nesting which suffer from this behaviour. I took one of them out myself to check that.

The example is precisely what you need, "simplifying" it gives a half-working solution and won't work.

--
Other stuff I learned:

1. I have one master list which is "grouped" into a variable number of tables, within which the user can drag and drop. I thought I could do that with an on-the-fly filtered list in JS, and I can create the Vue tables that way. The problem is that vue.draggable _assumes_ that tables you're dragging from/ to have separate lists, and making it work on a single list confuses vue.draggable. Fix: split the original list into multiple lists on data load.

1. Dropping onto an empty table doesn't work. See gotcha in the docs for partial reason. Solution: add a footer slot (is built into the component I think) and drop onto that. I'm still fiddling with CSS to see if I can make it appear like the whole table is a drop target.

[Mat-Moo]

Thanks for taking the time to respond, but I like simple and reusable :)
If you do the same(ish) thing with sortable https://codepen.io/Mat-Moo/pen/zPoeGO works as expected.
I've given up using a table for now, just a shame

[vanderlin]

@Mat-Moo see here: https://jsfiddle.net/dede89/L54yu3L9/

[Mat-Moo]

@vanderlin that's the version I simplified as per my message. I don't want to use a localtd tag, just regular tags as per the main draggable component.

[David-Desmaisons]

Here is a working example:
https://jsfiddle.net/dede89/fbdhk9g3/6/

[YipingRuan]

@David-Desmaisons would you help explain the

<script type="text/x-template" id="tr"> <tr> <td>{{item.name}}</td> <td>{{item.name}}</td> </tr> </script>
Seems to be still working if I remove this?

[David-Desmaisons]

Check also: https://sortablejs.github.io/Vue.Draggable/#/table-example

[gadget-iom]

Thanks for taking the time to respond, but I like simple and reusable :)
If you do the same(ish) thing with sortable https://codepen.io/Mat-Moo/pen/zPoeGO works as expected.
I've given up using a table for now, just a shame

...19 months later and still the same story I'm afraid.
I can't really move away from using a table, so I've given up using Vue.Draggable until this fundamental issue is either resolved or somebody can provide a working example.

[David-Desmaisons]

@gadget-iom I don't know what you are talking about.
There are a couple of working online examples of table working with vue.draggable:

https://sortablejs.github.io/Vue.Draggable/#/table-example

https://sortablejs.github.io/Vue.Draggable/#/table-column-example

[gadget-iom]

Looking at Mats original issue, it appears he was trying to use vue.draggable on a table in a DOM template. This is the same approach I am trying to take. The examples above look to be string templates/components and any attempt to use them in a DOM template breaks the table render.

Also (and it might just be me) but none of the jsfiddles above seemed to work either.

[David-Desmaisons]

Well, this is not a vue.draggable issue, you should take into consideration this vue limitation:
https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

[gadget-iom]

Thanks

[VinD-2019]

I cant seem to get drag and drop working on tables. Here is a jsfiddle with a non table section working, and the code from one of the standard examples for tables not working

https://jsfiddle.net/8qn4wv9j/

I cant figure out what is wrong here?

[VinD-2019]

Looking at Mats original issue, it appears he was trying to use vue.draggable on a table in a DOM template. This is the same approach I am trying to take. The examples above look to be string templates/components and any attempt to use them in a DOM template breaks the table render.

Also (and it might just be me) but none of the jsfiddles above seemed to work either.

Ah!, I read this a bit too late. I am also using the same approach which explains it.
(please ignore my previous comment)