表vuejs中td中的可拖动div答案

【问题标题】：Draggable div in td in table vuejs表vuejs中td中的可拖动div
【发布时间】：2021-08-22 21:05:59
【问题描述】：

我想用 Vue 可拖动在 tabe 中的 tds 之间拖动 div。我写了

 <template>


 <div class="row">
<div class="col-8">
  <h3>Draggable table</h3>

  <table class="table table-striped">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Id</th>
        <th scope="col">Name</th>
        <th scope="col">Sport</th>
      </tr>
    </thead>
   <draggable v-model="list" tags="div"  @start="drag = true"
  @end="drag = false">
      <tr v-for="item in list" :key="item.name">
        <td scope="row"><div class="item">{{ item.id }}</div></td>
        <td><div class="item">{{ item.name }}</div></td>
        <td><div class="item">{{ item.sport }}</div></td>
      </tr>
    </draggable>
  </table>
</div>

<script>

但不能拖动 div。如何在表格中的 td 之间拖动 div？谢谢

【问题讨论】：

标签： vue.js html-table draggable

【解决方案1】：

我不知道您是错过了当前的方法还是还没有。在你的请求中搜索了一下，找到了一些你可以开始的东西。

How TO - Create a Draggable HTML Element

本例中使用了一个 div。也许这会对你有所帮助。

【讨论】：