时间戳

首页 > 解决方案 > 表vuejs中td中的可拖动div

vue.js - 表vuejs中td中的可拖动div

问题描述

我想用 Vue draggable 在 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.jshtml-tabledraggable

解决方案

我不知道您是否只是错过了包含您当前的方法或者还没有。在您的请求中进行了一些搜索，并找到了一些可供您开始的内容。

如何 - 创建可拖动的 HTML 元素

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

推荐阅读