拖放獲取位置

我很困惑，真的可能需要我正在進行的一個項目的一些幫助。拖放獲取位置

首先讓我解釋我想要做什麼。

我有一個2個或更多的表的PHP網站。裏面的表格是允許用戶將元素放入其中的div。例如，我們有1個空表，2列和2行，第二個表中有x個元素（我從數據庫中獲取元素）。用戶能夠將table2中的元素拖放到table1中。我設法做到了這一點，但在下一步中，我需要獲取已拖動元素的新位置（或站點上的所有元素），以便我可以將新位置保存在數據庫中。

表1是建立這樣的：

<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);

下降（事件）函數裏面，但我只是不能得到它的工作>。 <

有人可以請我伸出援助之手，也許可以解釋我如何做這樣的事情？我剛剛開始學習JavaScript，但我真的認爲這會工作。

我需要表格中的div（在另一個div內）的col和row。如果我想要做的事情（以我的方式）是愚蠢的，請告訴我。我真的很想學習，可能需要一些指導。

在此先感謝

來源

2015-08-28 Savyi

答案是

ev.target.parentNode.parentNode.rowIndex

家長的div是td但你需要tr的rowIndex。

查看演示：https://jsfiddle.net/pxLymxq1/

來源

2015-08-28 10:58:50 PiTheNumber

噢我的上帝，它很容易讓我不好意思問。非常感謝。 – Savyi

拖放獲取位置

回答

相關問題