Question

我正在陷入困境，真的需要一些我正在进行的项目的帮助。

首先让我解释一下我想做什么。

我有一个包含2个或更多表的php站点。表格内部是div，允许用户将元素放入其中。因此，例如，我们有1个空表，2个col和2行，第二个表有x个元素（我从数据库中获取元素）。用户可以从table2拖动元素并将它们放在table1中。我设法让这一点工作，但在我的下一步我需要获得已被拖动的元素的新位置（或网站上的所有元素），以便我可以在数据库中保存新位置。

Table1的构建方式如下：

<table class="tg">
          <tr>
            <th class="tg-031e" colspan="2">Table 1</th>
          </tr>
          <tr>
            <td class="tg-031e"><div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td class="tg-031e"><div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
          </tr>
          <tr>
            <td class="tg-031e"><div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td class="tg-031e"><div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
          </tr>
</table>

表2看起来像这样：

<table class="tg2">
  <tr>
    <th class="tg-031e">table2</th>
  </tr>
    <?php
            $select = mysql_query($query_member);
            while($row = mysql_fetch_array($query_member)) {
            ?>
                <tr>
                   <td class="tg-031e"><div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"><div id="<?php echo $row['id']?>" class="dragitem" draggable="true" ondragstart="drag(event)"><?php echo $row['name']?></div></div></td>
                </tr>

            <?php
            }
            ?>
</table>

所以你可以看到我有一张桌子，里面有div可以让物品被拖放在里面，而物品本身也在div里面。

我的拖放功能的javascript：

<script>
   window.allowDrop = function(ev) {
    ev.preventDefault();
    if (ev.target.getAttribute("draggable") == "true")
        ev.dataTransfer.dropEffect = "none";
    else
        ev.dataTransfer.dropEffect = "all";
};

window.drag = function(ev) {
    ev.dataTransfer.setData("id", ev.target.id);
};

window.drop = function(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("id");
    var dragged = document.getElementById(id);
    ev.target.appendChild(dragged);
    dragged.className += " dropped";
};
</script>

我现在尝试使用javascript来获取表中项目的位置已经有一段时间了。我认为最好使用“ondrop”事件，因此只要删除一个项目，我就可以更新它在sql表中的位置。

我试过这样的事情（只是为了测试）

alert(ev.parentNode.rowIndex);

在drop（事件）函数中，但我无法让它工作＆gt;。＆lt;

有人可以帮助我，也许可以解释一下我怎么做这样的事情？我刚刚开始学习javascript，但我真的认为这样可行。

我需要表格内的div（在另一个div内）的col和row。如果我正在尝试做的事情（就像我在做的那样）是愚蠢的，请告诉我。我真的很想学习，可能需要一些指导。

提前致谢

Answer 1

答案是

ev.target.parentNode.parentNode.rowIndex

div的父级是td，但tr需要rowIndex。

请参阅演示：https://jsfiddle.net/pxLymxq1/

拖放获取位置

1 个答案: