使用一些转换事件的代码（包含代码）在移动设备上拖放，但正常事件不起作用

Question

我使用以下代码允许在我的网站上进行触摸拖放。 但是，虽然我的代码中具有拖放功能的部分可以工作，但在iPhone上，无论如何我都无法滚动或移动页面。 我可以拖放，但常规iPhone触控功能已经消失！

我在几个Stack Overflow响应中找到了以下片段，所以我想知道是否有解决方法。 我希望能够在网络和移动设备上拖放。

我的拖动代码（只是一个列表）：

$(function() {
    $(".drag_me ul").sortable();
});

触摸事件的代码：

function touchHandler(event)
{
 var touches = event.changedTouches,
    first = touches[0],
    type = "";

     switch(event.type)
{
    case "touchstart": type = "mousedown"; break;
    case "touchmove":  type="mousemove"; break;        
    case "touchend":   type="mouseup"; break;
    default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
                          first.screenX, first.screenY,
                          first.clientX, first.clientY, false,
                          false, false, false, 0/*left*/, null);

first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}

function init()
{
   document.addEventListener("touchstart", touchHandler, true);
   document.addEventListener("touchmove", touchHandler, true);
   document.addEventListener("touchend", touchHandler, true);
   document.addEventListener("touchcancel", touchHandler, true);    
}

Answer 1

我一直在研究同样的问题，并认为我只是舔它。 我删除了touchHandler的内容并使用它们来填充将事件侦听器仅绑定到<div id='stage'>的子节点的回调。 下面是我使用jquery的代码。 希望这可以帮助！

function init(){


 $("#stage").children().bind('touchstart touchmove touchend touchcancel', function(){
    var touches = event.changedTouches,    first = touches[0],    type = ""; 
    switch(event.type){    
      case "touchstart": type = "mousedown"; 
    break;    
      case "touchmove":  type="mousemove"; 
    break;            
      case "touchend":   type="mouseup"; 
    break;    
      default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);
    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
  });
}

Answer 2

您正在使用以下代码行阻止默认滚动功能：

event.preventDefault();

由于此事件对象与文档绑定，因此禁用所有本机卷轴。

如果您希望允许本地滚动页面，则将您的事件侦听器添加到文档元素的后代（这样，如果用户在可排序容器以外的区域中滚动，则他们将能够正常滚动页面）。

更改：

function init()
{
   document.addEventListener("touchstart", touchHandler, true);
   document.addEventListener("touchmove", touchHandler, true);
   document.addEventListener("touchend", touchHandler, true);
   document.addEventListener("touchcancel", touchHandler, true);    
}

至：

function init()
{
   $('#sortable_container').bind('touchstart touchmove touchend touchcancel', touchHandler); 
}