Question

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

enter image description here

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

选择元素或弹出工作表。

enter image description here

如果我在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的this教程。这是一篇很酷的文章demo。

code courtesy

Answer 2

嗯，有可能使用WebView。实际的答案是：怎么样？如何，以获得一个伟大的用户体验结果。移动设备不是桌面设备，实际的解决方案是UX专用于移动设备：

您可以使用longtap使卡片“飞行/准备拖动”（关闭滚动）。或者使用卡上的区域/平面按钮，用户可以拖动它来拖动它。思考。 你绝对应该避免滚动和放大拖动'同时打开'。它是拖动或滚动，永远不会拖动和滚动。

修改您可以使用：

用于管理拖动@ https://jqueryui.com/draggable/

的JQuery UI

JQuery Mobile vmouse 事件。（适用于mousemove，最好）。 @ https://api.jquerymobile.com/category/events/

Answer 3

如果您只是想知道是否有一种简单的方法可以在移动设备上实现拖放跨平台，我建议您使用Interact.js，这是一个很好的用户界面互动库我已经使用过了成功地参与了多个项目。

使用一些小代码，您可以实现工作拖放，如下所示：

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

我已经在手机游戏中测试了它，它运行得很好，允许拖放。您可以在its doc page找到更多文档。

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

Answer 4

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

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

查看人口统计信息，您可以在移动设备touchpunch demo page上试用。

在UIWebView / WKWebView中启用拖动

4 个答案: