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()的对象请求数据。请记住，这是<div>，其中包含具有该属性的<i>。因此数据为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/进行测试，并按预期工作。

希望有所帮助。

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

1 个答案: