Jquery UI拖放-仅在移动设备上拖放时拖动的项目消失

Question

我正在尝试使拖放功能正常工作，并且在笔记本电脑的台式机上很好。但是，在移动设备上，当我拖放时，拖动的项目会在其他所有内容下方消失（我认为），我真的无法弄清楚原因。

我已将显示问题的页面上传到http://mailandthings.co.uk/dam1/

我已经尝试在可拖动代码中设置 zindex 并没有区别

       var $dragContainer = $("div.drag-container");
        var $dragItem = $("div.drag-item");

        $dragItem.draggable({
            cursor: "move",
            snap: "div.drag-container",
            snapMode: "inner",
            snapTolerance: 10,
            helper: "clone",
            handle: "i",
            zIndex: 10000
        });

        $dragContainer.droppable({
            drop: function (event, ui) {
                var $elem = $(event.toElement);

                var obj = {
                    posX: event.pageX - $dragContainer.offset().left - event.offsetX,
                    posY: event.pageY - $dragContainer.offset().top - event.offsetY,
                    data: $elem.data(),
                    html: $elem.html()
                };
                addElement(obj);
                masterPos.push(obj);

            }
        });

        function addElement(obj) {
            var $child = $("<div>");
            $child.html("<i>" + obj.html + "</i>").addClass("drop-item drop-item-mobile");
            $child.attr("data-type", obj.data.type);
            $child.css({
                top: obj.posY,
                left: obj.posX
            });
            $dragContainer.append($child);
        }

如果它使用 jQuery UI Touch Punch 0.2.3

有人有什么想法吗？

Answer 1

我发现了一个后勤问题。根据您的代码，我可以识别以下状态/逻辑：

• 用户将项目（A、B、C）拖到汽车图像上以指示凹痕、划痕或严重损坏
  • 掉落点指示损坏类型的位置
• 当拖放项目时，应创建一个新对象，该对象指示类型并将位置存储在汽车地图上
  • 这个新对象替换拖动的项目并附加到容器中

为了对此进行扩展，您有以下代码，即被拖动的元素，例如：

<div class="drag-item ui-draggable" style="">
  <i data-type="A" class="ui-draggable-handle">A</i>Dent
</div>

这在创建新对象时很重要。在您当前的代码中，您从一个没有任何数据属性的对象$elem.data() 请求数据。请记住，这是包含具有属性的<i> 的<div>。所以数据是null 或undefined。您将希望从子元素中捕获数据：$elem.find("i").data()。

此外，由于您将所有 HTML 附加到新对象，因此您创建了一个双重包装的元素。 $child 看起来像：

<div class="drop-item drop-item-mobile">
  <i>
    <div class="drag-item ui-draggable" style="">
      <i data-type="A" class="ui-draggable-handle">A</i>Dent
    </div>
  </i>
</div>

我不认为这是你的意图。我怀疑你的意图是创造：

<div class="drop-item drop-item-mobile">
  <i>A</i>
</div>

下面是一个例子：https://jsfiddle.net/Twisty/g6ojp4ro/40/

JavaScript

$(function() {
  var theForm = document.forms.form1;
  if (!theForm) {
    theForm = document.form1;
  }

  function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
      theForm.__EVENTTARGET.value = eventTarget;
      theForm.__EVENTARGUMENT.value = eventArgument;
      theForm.submit();
    }
  }

  var masterPos = [];
  $("#hidpos").val('');

  var $dragContainer = $("div.drag-container");
  var $dragItem = $("div.drag-item");

  $dragItem.draggable({
    cursor: "move",
    snap: "div.drag-container",
    snapMode: "inner",
    snapTolerance: 10,
    helper: "clone",
    handle: "i",
    zIndex: 10000
  });

  $dragContainer.droppable({
    drop: function(event, ui) {
      var $elem = ui.helper;
      var type = ui.helper.find("i").data("type");
      var $child = $("<div>", {
        class: "drop-item drop-item-mobile"
      }).data("type", type);
      $("<i>").html(type).appendTo($child);
      $child.appendTo($dragContainer).position({
        of: event
      });
      var obj = {
        posX: $child.offset().top,
        posY: $child.offset().left,
        data: $child.data(),
        html: $child.prop("outerHTML")
      };
      masterPos.push(obj);
    }
  });

  $("map").imageMapResize();

  // Save button click
  $('#form1').submit(function(e) { //$("#btnsave").click(function () {
    if (masterPos.length == 0) {
      $("#spnintro").html("Oops!");
      $("#spninfo").html("No position data was entered");
      $("#dvinfo").fadeTo(5000, 500).slideUp(500, function() {});
    } else {
      $("#hidpos").val(JSON.stringify(masterPos));
      $.ajax({
        url: '/handlers/savepositions.ashx',
        type: 'POST',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(data) {
          $("#spnintro").html("Success!");
          $("#spninfo").html("Position data has been saved");
          $("#dvinfo").fadeTo(5000, 500).slideUp(500, function() {});
        }
      });
    }
    e.preventDefault();
  });
});

在https://jsfiddle.net/Twisty/g6ojp4ro/40/show/ 使用移动客户端进行了测试，并按预期工作。

希望对您有所帮助。