移动设备上的 JavaScript 拖放交换 div

Question

我目前正在开发一款移动应用/游戏。我很难让库存系统在手机上正常工作。拖放在电脑上用鼠标可以很好地工作，但在手机上就不行了。

JavaScript 代码：

document.addEventListener("DOMContentLoaded", function(event) {
  $(document).ready(function(){
    var videoPath = "videos/lg/";
    var draggedItem = null; 
    $('.segmentListItem').each(function(index){
      $(this).on("dragstart", handleDragStart);
      $(this).on("drop", handleDrop);
      $(this).on("dragover", handleDragOver);                        
    });
    function handleDragStart(e){
      //console.log('start');
      draggedItem=this;
      e.originalEvent.dataTransfer.effectAllowed = 'move';
      //e.dataTransfer.dropEffect = 'move'; //MH - do we need both of these?
      e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
      }
      e.originalEvent.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
      return false;
    }

    function handleDrop(e){
      if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
      }

      if (draggedItem != this) { //MH - swap if we're not dragging the item onto itself
        var copy=$(this).clone(true,true);
        var slot1 = $(this).attr("id");
        var slot1Temp = slot1 + "temp";
        var slot2 = $(draggedItem).attr("id");
        $(this).replaceWith($(draggedItem).clone(true,true));
        $(draggedItem).replaceWith($(copy).clone(true,true));
        slotID = "slotID-" + slot1;
        document.getElementById(slot1).id = slot1Temp;
        document.getElementById(slot2).id = slot1;
        document.getElementById(slot1Temp).id = slot2;
                
        $.ajax({
          type: "GET",
          url: '/inventorySwap.php',
          data: {'slot1': slot1,'slot2': slot2},
          success: function(data) {
            alert(data);
          }
        });                
      } 
      return false;
    }              
  });
});

HTML/PHP 代码：

<div class='inventorySlot". $obj->slot_id ."'>
  <img class='segmentListItem' draggable='true' id=slotID-". $obj->slot_id ." src='{$itemImage}' />
</div>

对不起，如果这个问题设置得有点奇怪，我通常会自己研究和学习。我不喜欢问问题，我完全被这个问题难住了。

我需要什么（与鼠标/电脑完美搭配） 将元素从 1 个 div 拖到另一个。在发布的代码中，它还更改了交换元素的 id 以匹配它们的 div 库存槽号。这是为了防止在更新数据库以在槽记录内交换时出错。

感谢您提供的所有帮助。

Answer 1

在玩了几个小时后，我设法得到了我需要的东西。

外部 div 用于放置事件， 中间 div 用于拖动事件，必须具有宽度/高度才能填充外部 div 内部 div 必须具有绝对位置，并且 z 索引小于中间 div。

这样不管怎样，你点击的是中间的div，而不是里面的内容。

JS 代码将两个插槽 id 保存为变量 然后将 id 的 innerhtml 存储为另一个变量。

然后它将存储变量 id1 的 innerhtml 更改为 id2 的 html

contents 为 var，然后将每个内容替换为

function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    id1 = event.target.id;
    id1Html = document.getElementById(id1).innerHTML;
}

function dragging(event) {

}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    id2 = event.target.id;
    id2Html = document.getElementById(id2).innerHTML;
    document.getElementById(id1).innerHTML = id2Html;
    document.getElementById(id2).innerHTML = id1Html;
    alert(id1);
    alert(id2);
}

.inventorySlot1{position: absolute;top: 22%;left: 45%;width: 9%;height: 1px;height: 7%;overflow:hidden;background-color:green;opacity:0.5;}
.inventorySlot2{position: absolute;top: 22%;left: 54.5%;width: 9%;min-height: 1px;height: 7%;overflow:hidden;background-color:red;opacity:0.5;}
.inventorySlot6{position: absolute;top: 29.5%;left: 45%;width: 9%;height: 1px;height: 7%;overflow:hidden;background-color:green;opacity:0.5;}
.inventorySlot7{position: absolute;top: 29.5%;left: 54.5%;width: 9%;min-height: 1px;height: 7%;overflow:hidden;background-color:red;opacity:0.5;}

    <div class='inventorySlot1' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-1' style='width:100%;height:100%;'>
            <div style='position:absolute;z-index:-1;'>
            <img src='http://siteprice.co/images/failed.png'>
            </div>
        </div>
    </div>
    
        <div class='inventorySlot2' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-2' style='width:100%;height:100%;'>
            <div style='position:absolute;z-index:-1;'>
            <img src='http://siteprice.co/images/safe.png'>
            </div>
        </div>
    </div>
    
    <div class='inventorySlot6' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-6' style='width:100%;height:100%;'>
            <div style='position:absolute;z-index:-1;'>
            <img src='http://siteprice.co/images/alexa.png'>
            </div>
        </div>
    </div>
    
        <div class='inventorySlot7' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-7' style='width:100%;height:100%;'>
            <div style='position:absolute;z-index:-1;'>
            <img src='http://siteprice.co/images/whois.png'>
            </div>
        </div>
    </div>