在 UIWebView / WKWebView 中启用拖动答案

【问题标题】：Enable dragging in UIWebView / WKWebView在 UIWebView / WKWebView 中启用拖动
【发布时间】：2015-09-29 09:08:11
【问题描述】：

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

但是，在 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 是否可以）

【问题讨论】：

CSS 属性 -webkit-user-drag: 是一个选项。但这必须针对相应的元素进行。在 iOS 中，滚动会与拖动发生冲突。通常禁用滚动视图的scrollEnabled 和bounces 属性将允许拖动。我认为这对您来说不是一个可行的解决方案，原因有两个。首先，我认为董事会本身会滚动。因此，上述选项可能不起作用，其次，如果无法滚动，则很难在手机上将网站用作 trello。
为了摆脱滚动问题，我想知道是否可以单击并按住...可能几秒钟...在允许移动板之前。并且没有初始保持的拖动将正常滚动。
你的 JS 中有触摸事件吗？
您必须做两件事：1. 监听touch* 事件并触发相应的mouse* 事件（不要忘记复制所有X 和Y 数据，并调用@987654329 @ on touchmove 以防止在拖动时滚动页面，但只能拖动可拖动元素，否则滚动和缩放不起作用）和 2. 在 Trello 上手动启用拖动，因为它们禁用用于移动设备（在他们的搜索中搜索 isTouch() JS 文件）。他们使用 jQueryUI 的可拖放和可拖放，但他们以某种方式使用可拖放作为可拖放......所有东西都被包裹在无数个闭包中。
使用hammerjs可以轻松完成拖动，但我不知道如何修改trello.com的源以允许这样做。

标签： javascript ios uiwebview wkwebview

【解决方案1】：

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

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

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

如果我在 UIWebView 或 WKWebView 中显示它，我可以让 WebView 更像桌面 Safari，以便我可以拖动元素吗？

.. 我只是好奇这是否可以通过 WebView 实现

是的，在 WebView 中是可能的。您可以使用 Jquery UI 进行拖放，并使用附加库将鼠标事件转换为您需要的触摸。看看jquery-ui-touch-punch。有了这个，你从 Jquery UI 中拖放就可以在 iOS 或任何设备上工作。你可以使用类似的东西：

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

将鼠标事件转换为触摸，它就像魔术一样工作。看看this jQuery UI Touch Punch 教程，带有 jQuery UI 。这是一篇很酷的文章，上面有demo。

code courtesy

【讨论】：

【解决方案2】：

嗯，可以使用 WebView。 实际答案是：如何？如何，以获得出色的用户体验结果。移动设备不是桌面，实际的解决方案是用户体验问题，专用于移动：

您可以使用长按使卡片“飞行/准备拖动”（关闭滚动）。或者使用卡片上的区域/平面按钮，用户可以钩住它来拖动它。想法。 您绝对应该避免同时“打开”滚动和拖动。它是拖动或滚动，从不拖动和滚动。

编辑您可以使用：

JQuery UI 管理拖拽@https://jqueryui.com/draggable/
JQuery Mobile vmouse 事件。（与mousemove 配合得很好，最好的）。 @https://api.jquerymobile.com/category/events/

【讨论】：

【解决方案3】：

如果您只是想知道是否有一种简单的方法可以在移动设备上启用跨平台拖放，我可能会建议您使用Interact.js，这是我在多个项目中成功使用的一个不错的 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)';  
    }    
  });

你可以在这里找到我刚刚构建的这个工作示例：http://codepen.io/leonardfactory/pen/MwPBjZ

我已经在移动 Safari 上对其进行了测试，它运行良好，允许拖放。您可以在 its doc page 上找到更多文档。

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

【讨论】：

【解决方案4】：

我不确定这是否是您所需要的，但请查看jquery-ui-touch-punch。

它处理触摸事件（touchstart、touchmove、touchend）以便正常工作。

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

【讨论】：