Question

有一个我目前正在处理的项目，Vue.Draggable对于我一直在使用的Vue设置来说效果惊人。虽然，在尝试拖动表的多行时遇到困难。

<table>
  <draggable :element="'tbody'">
    <template v-for="category in categories">
      <tr :style="'background-color: ' + category.color">
        <td rowspan="2">{{ category.id }}</td>
        <td>{{ category.name }}</td>
      </tr>
      <tr :style="'background-color: ' + category.color">
        <td>{{ category.updated_at }}</td>
      </tr>
    </template>
  </draggable>
</table>

我正在使用的表已填满内容，并且我需要将溢出的内容放到新行中（针对每个项目），但是我希望在拖动时将它们全部放在同一组中，，第一行被单独拖到第二行（如上面的jsfiddle所示）

到目前为止，我发现的唯一解决方案是创建一个单列行，并在每列内创建另一个多行表。虽然，这不能使每个列在不同项目之间正确对齐。但是，如下所示，由于表是不同的，因此无法正确对齐所有列。

https://jsfiddle.net/MrCouchy/1xo98p3q/

<table>
  <draggable :element="'tbody'">
    <template v-for="category in categories">
      <table>
        <tr :style="'background-color: ' + category.color">
          <td rowspan="2">{{ category.id }}</td>
          <td>{{ category.name }}</td>
          <td rowspan="2">{{ category.secondary_content }}</td>
        </tr>
        <tr :style="'background-color: ' + category.color">
          <td>{{ category.updated_at }}</td>
        </tr>
      </table>
    </template>
  </draggable>
</table>

是否有一种方法可以使多个表行可拖动同时保持格式相同？

预先感谢

Vue.JS，Vue.Draggable-移动表的多行

0 个答案: