Vue.draggable: transition groups on sorting table rows

[daveroberts]

Is it possible to add a transition group on sorting table rows?

<table>
  <draggable :element="'tbody'">
    <transition-group><!-- create a span tag by default -->
      <tr v-for="person in people" v-bind:key="person">
      </tr>
    </transition-group>
  </draggable>
</table>

Currently the above fails because the HTML output is:

<table>
  <tbody>
    <span><!-- having the span here messes up rendering -->
      <tr></tr>
      <tr></tr>
    </span>
  </tbody>
</table>

[David-Desmaisons]

try:

  <draggable :element="'table'">
    <transition-group :tag="'tbody'"><!-- create a span tag by default -->
      <tr v-for="person in people" v-bind:key="person">
      </tr>
    </transition-group>
  </draggable>

[daveroberts]

I'm not sure that will work for me because

1. My table also contains a thead, and I don't want that to be draggable
2. My table contains multiple tbody sections, only one of which contains draggable components

A more representative depiction of my table is this:

<table>
  <thead></thead>
  <draggable :element="'tbody'">
    <transition-group><!-- create a span tag by default -->
      <tr v-for="person in people" v-bind:key="person">
      </tr>
    </transition-group>
  </draggable>
  <tbody><tbody>
</table>

[David-Desmaisons]

Could you jsfiddle the corresponding table with multiple tbody?

[David-Desmaisons]

@daveroberts , both draggable and transition-group have to create an HTML element.
transition-group should be the only direct child of draggable.
These are the limitation inherent to both components.
If you send an jsfiddle we can try to make it work in the context of a table

[David-Desmaisons]

Hello @daveroberts , could create a jsfiddle with the data?

[daveroberts]

I created a repository which demonstrates the issue: https://github.com/daveroberts/vuedraggabletable

This same code applied to jsfiddle doesn't seem to work.

[David-Desmaisons]

Hi @daveroberts , I corrected the mark-up and now it is working see here: https://github.com/David-Desmaisons/vuedraggabletable

[mcesar]

Link is broken.

[David-Desmaisons]

@mcesar the issue was not related to vue.draggable but to mark-up problem.

[David-Desmaisons]

And I deleted my fork repo.

[mcesar]

Where can I find a sample with tables?
Em sex, 24 de fev de 2017 às 17:28, David Desmaisons <
[email protected]> escreveu:

And I deleted my fork repo.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SortableJS/Vue.Draggable/issues/61#issuecomment-282396115,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABrlE3OP94aU0ZemkAL9DPLxejx7dWN6ks5rfz1dgaJpZM4LjJkQ
.

[David-Desmaisons]

@mcesar , Here is a valid example

<template>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Table where sorting works.  No transition group</th>
        </tr>
      </thead>
      <draggable :list="people" :element="'tbody'">
        <tr v-for="person in people">
          <td>{{ person.name }}</td>
        </tr>
      </draggable>
      <tbody>
        <tr><td>Non-moving tbody goes here</td></tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>Table with sorting and transition group</th>
        </tr>
      </thead>
      <draggable :list="places" :element="'tbody'">
        <transition-group tag="div" name="list-complete">
          <tr v-for="country in places" :key="country.name" class="list-complete-item">
            <td>{{ country.name }}</td>
          </tr>
        </transition-group>
      </draggable>
      <tbody>
        <tr><td>Non-moving tbody goes here</td></tr>
      </tbody>
    </table>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'app',
  data () {
    return {
      people: [
        {name: "Abby"},
        {name: "Brooke"},
        {name: "Courtenay"},
        {name: "David"}
      ],
      places: [
        {name: "Austria"},
        {name: "Bahamas"},
        {name: "Canada"},
        {name: "Djibouti"}
      ]
    }
  },
  components: { draggable }
}
</script>
<style>
table{ border: 1px solid black; margin: 2em; }

.list-complete-item {
  transition: all 1s;
}

.list-complete-enter, .list-complete-leave-active {
  opacity: 0;
  height: 0px;
  margin-top: 0px;
  padding: 0px;
  border: solid 0px;
}

</style>

[jrwnz]

@David-Desmaisons I'm having real trouble getting this example to work. (Or anything with tr/td tags for that matter). If I change the tr/td tags into divs the sorting works, so it seems like it _should_ work as-is. But with tr/td tags everything renders fine, but trying to sort just results in selecting text.
What am I missing? Perhaps handles are required in order to sort tr's within a table?

[David-Desmaisons]

Hi @jrw2184 , I am not sure why trying to sort just results in selecting text. Handles may be a bypass but it should work as is. Could you create a jsfiddle with your example ?

[jrwnz]

@David-Desmaisons Sure: https://jsfiddle.net/jrw2184/wpykrxxx/1/
This is just the first table in the example above, plus a second 'table' which is identical except with tr/td tags replaced with divs. The second can be sorted (and doing so sorts the first), but obviously doesn't render as a table. But when I try to sort the first directly I can't do anything but select text.

[David-Desmaisons]

Try this:

https://jsfiddle.net/dede89/L54yu3L9/

[jrwnz]

Excellent, thanks so much! Seems like the part that makes a difference is having the table itself in a component and receiving the list as a prop. Very interesting.

Anyway, thanks again. Draggable has been super helpful, I wish I could star a second time!

[David-Desmaisons]

@jrw2184 , thanks! Main problem was having the HTML parsed by browser as a first step. Using template removed this problem: see Vue.doc for reference.

[e-sana]

@daveroberts Is it just the actual table that need to be in a separate component and not the td? It seems like it is so: https://jsfiddle.net/L54yu3L9/40/ Could you please write something about this in the documentation? Also I think that the jsfiddles should be higher up in the documentation, perhaps below the animated demo gif.

[daveroberts]

@e-sana I'm not @David-Desmaisons , maybe you meant to tag him.

The fiddle you posted would not have worked for my case, because "My table contains multiple tbody sections, only one of which contains draggable components". The fiddle had only one body section.

In any event, this issue was resolved for me.

[9diov]

Sorry to resurrect this but I'm facing this issue as well. @daveroberts How did you manage to resolve this?

[daveroberts]

I checked out my repository again. It seems that the behavior is different now:

1. The second list, which has the country names, doesn't display anything until you add a 'key' value.
2. Once you do add a key value, the list sorts properly without any other alterations.

This sample was made without a yarn.lock or npm shrinkwrap file, so I have to assume that the difference is due to the version numbers matching up.

Because I can't replicate the issue, I can't debug the issue. If you are able to produce a repository that has the problem, you can post it here.

[essivision]

I remove transition group. this code solved my problem:

<draggable tag="tbody"
                       handle=".tbody-handler"
                       v-model="list"
                       v-bind="dragOptions"
                       @start="drag = true"
                       @end="drag = false">
                    <tr v-for="(item, index) in listCompute" :key="item.id">
                        ...
                    </tr>
</draggable>

I copy all this code link and just remove <transition-group> tag

[mhluska]

@essivision yeah but the point is to get this working with tables and transition-group lol. It is trivial without transition-group.

If you're ok with invalid HTML and poor browser support, you can set display: contents on the transition-group element inside the tbody.

[farrukhsubhani]

For those getting frustrated with jsfiddle examples not working for them. Here is working example with table and rows. This is in reply to stackoverflow issue.

[lazerg]

@mhluska Thank you for answer, not both transition-group and draggable works in one table, but about browser support. Which browsers supports this?