javascript - 在 UIWebView/WKWebView 中启用拖动

Question

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 是否可行)

Answer 1

Trello, on the desktop website, allows you to drag elements around..

However, when using Safari on iOS, this doesn't work.

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

If I present this in a UIWebView or WKWebView, can I make the WebView act more like desktop Safari, so that I can drag the elements around?

.. I'm just curious if this is possible with 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