Question

我目前正在开发移动应用/游戏。我很难让库存系统在手机上正常工作。使用鼠标在电脑上拖放工作完全正常，但无法在手机上工作。

JavaScript代码：

＆＃13;

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

＆＃13;

HTML/PHP代码：

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

对不起，如果这个问题设置有点奇怪，我通常会自己研究和学习。我不想问问题，我只是完全被这个问题困扰。

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

感谢您提供的任何和所有帮助。

Answer 1

经过几个小时的游戏，我设法得到了我需要的东西。

外部div用于丢弃事件，中间div用于拖动事件，必须有宽度/高度来填充外部div 内部div具有绝对位置，z指数小于中间div。

这种方式无论如何，你点击中间div，而不是它的内在内容。

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

然后它用html为id2

更改存储变量id1的innerhtml

将内容作为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>

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

1 个答案: