Javascript 在UIWebView/WKWebView中启用拖动

桌面网站上的Trello允许您像这样拖动元素：

var position = { x: 0, y: 0 };
interact('.element')
  .draggable({
    onmove: function(e) {
      var target = e.target;

      // calculate position
      position.x += e.dx;
      position.y += e.dy;

      // translate the element
      target.style.webkitTransform = 'translate(' + position.x + 'px, ' + position.y + 'px)';  
    }    
  });

但是，在iOS上使用Safari时，这不起作用

它要么选择元素，要么弹出一张图纸

如果我在UIWebView或WKWebView中演示此功能，是否可以使WebView更像桌面Safari，以便可以拖动元素

我发现我可以通过向webview发送一些javascript来停止各种iOS操作：

// stop selection
webView.stringByEvaluatingJavaScriptFromString("document.documentElement.style.webkitUserSelect='none';")

// stop copy/paste etc
webView.stringByEvaluatingJavaScriptFromString("document.documentElement.style.webkitTouchCallout='none';")

// stop loupe
webView.stringByEvaluatingJavaScriptFromString("document.body.style.webkitUserSelect='none';")

但这仍然不允许我拖动元素

有解决办法吗

---

（我知道有一个Trello应用程序，我只是好奇WebView是否可以实现这一点）

我不确定这是否是您所需要的，但看看这个

它处理touchevents（touchstart、touchmove、touchend）以便正常工作

---

查看演示页面，您可以在移动设备上试用。

如果您想知道是否有一种简单的方法可以在移动设备上实现跨平台拖放，我建议您使用，这是一个很好的UI交互库，我已经在多个项目中成功地使用过

使用少量代码可以实现工作拖放，如下所示：

var position = { x: 0, y: 0 };
interact('.element')
  .draggable({
    onmove: function(e) {
      var target = e.target;

      // calculate position
      position.x += e.dx;
      position.y += e.dy;

      // translate the element
      target.style.webkitTransform = 'translate(' + position.x + 'px, ' + position.y + 'px)';  
    }    
  });

您可以在这里找到我刚刚构建的工作示例：

我在MobileSafari上测试过，它工作正常，允许拖放。 您可以在上找到更多文档

我希望这能回答你的问题，如果你的需求更具体，请随意评论，我会尝试编辑我的答案以适应它

桌面网站上的Trello允许您拖动元素

但是，在iOS上使用Safari时，这不起作用

它在safari iOS上不起作用的原因是它认为鼠标事件（在桌面上）不同于触摸事件（在iOS上）

如果我在UIWebView或WKWebView中演示此功能，是否可以使WebView更像桌面Safari，以便可以拖动元素

。。我只是好奇在WebView中是否可以做到这一点

是的，这在WebView中是可能的。您可以使用jQueryUI进行拖放，还可以使用一个附加库将鼠标事件转换为您所需要的触摸。看一看。有了它，您可以在iOS或任何设备上从Jquery UI进行拖放操作。您可以使用以下内容：

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

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

将鼠标事件转换为触控，效果非常神奇。看一看关于jQueryUI触摸打孔的教程，使用jQueryUI。这里有一篇很酷的文章，上面有同样的内容

---

好吧，网络视图是可能的。实际答案是：如何？如何，以获得一个伟大的用户体验结果。移动设备不是桌面，实际解决方案是UX问题，专用于移动：

你可以使用一个长柄来制作一张卡片“飞行/准备拖动”（关闭滚动）。或者使用卡上的区域/平面按钮，用户可以通过该按钮拖动卡。思想您应该绝对避免同时滚动和拖动“打开”。这是拖动或滚动，永远不要拖动和滚动。

编辑 您可以使用：

• 用于管理拖动的JQuery UI@

• JQuery Mobilevmouse事件。（与

  mousemove

  配合使用效果最佳）。@

---

CSS属性

-webkit用户拖动：

是一个选项。但这必须针对相应的元素进行。。在iOS中，滚动将与拖动发生冲突。通常禁用scrollview的

scrollEnabled

和

bounces

属性将允许拖动。我认为这对你们来说不是一个可行的解决方案，原因有二。。首先，我认为董事会本身是滚动的。因此，上述选项可能不起作用，其次，在手机上使用trello这样的网站而不能够滚动是很困难的。为了解决滚动问题，我想知道是否可以单击并按住。。。也许几秒钟。。。在允许移动板之前。在没有初始保持的情况下拖动会像平常一样滚动。你在JS中获得触摸事件了吗？你必须做两件事：1。收听

touch*

事件，并启动相应的

鼠标*

事件（不要忘记复制所有X和Y数据，并在

touchmove

上调用

preventDefault

，以防止拖动时页面滚动，但只能拖动可拖动的元素，否则滚动和缩放将不起作用）和2。手动启用Trello上的拖动，因为它们禁用移动设备的is（在JS文件中搜索

isTouch（）

）。他们使用jQueryUI的draggable&droppable，但他们不知何故使用droppable作为draggable。。。所有的东西都被包装在无数个闭包中。用hammerjs可以很容易地进行拖动，但我不知道如何修改trello.com的源代码以允许这样做。