在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允许您拖动元素.

但是,在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);
}

将鼠标事件转换为触摸,它就像魔法一样.使用jQuery UI 查看关于jQuery UI Touch Punch的本教程.这是一篇很酷的文章与演示相同.

代码礼貌

Answer 2

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

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

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