드래그 앤 드롭 위치 가져 오기

나는 약간 갇혀 있고 내가 작업중 인 프로젝트에 도움이 정말로 필요할 수 있습니다.

먼저 제가하고 싶은 일을 설명하겠습니다.

2 개 이상의 테이블이있는 PHP 사이트가 있습니다. 테이블 내부에는 사용자가 요소를 드롭 할 수있는 div가 있습니다. 예를 들어 2 개의 col과 2 개의 행이있는 빈 테이블 1 개와 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>

Table2는 다음과 같습니다.

<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 안에 있습니다.

드래그 앤 드롭 기능을위한 내 자바 스크립트 :

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

나는 테이블 내부의 항목 위치를 얻기 위해 자바 스크립트를 사용하기 위해 꽤 오랫동안 노력하고 있습니다. 이를 위해 "ondrop"이벤트를 사용하는 것이 가장 좋을 것이라고 생각했기 때문에 항목이 삭제 되 자마자 SQL 테이블 내에서 해당 위치를 업데이트 할 수 있습니다.

나는 이와 같은 것을 시도했다 (테스트를 위해)

alert(ev.parentNode.rowIndex);

drop (event) 함수 내부에 있지만 단순히 작동하도록 할 수 없습니다>. <

누군가 저에게 도움의 손길을 주시고 어떻게 이런 일을 할 수 있는지 설명해 주시겠습니까? 나는 자바 스크립트를 배우기 시작했지만 정말 효과가 있다고 생각했습니다.

테이블 안에 div (다른 div 내부)의 열과 행이 필요합니다. 내가하려는 것이 (내가하는 방식으로) 어리 석다면 말해주세요. 나는 정말로 배우려고 노력하고 있으며 약간의 지침이 필요할 수 있습니다.

미리 감사드립니다