Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable dragging in UIWebView / WKWebView

Tags:

Trello, on the desktop website, allows you to drag elements around like this:

enter image description here

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

It either selects the element or pops up a sheet.

enter image description here

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've discovered I can stop various iOS actions by sending the webview some javascript:

// 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';")

But this still doesn't let me drag elements around.

Is there a solution?

(I know there is a Trello app, I'm just curious if this is possible with WebView)

like image 961
cannyboy Avatar asked Jul 10 '15 14:07

cannyboy


People also ask

Is WKWebView deprecated?

Apple is phasing out UIWebView, which is used by developers for integrating web content into an app in a quick and secure manner. Apple is replacing UIWebView (and WebView) with WKWebView, an updated version, as UIWebView has been deprecated.

How can I clear the contents of a UIWebView WKWebView?

To clear old contents of webview With UIWebView you would use UIWebViewDelegate 's - webViewDidFinishLoad: .

How do I import WKWebView into Objective C?

You can implement WKWebView in Objective-C, here is simple example to initiate a WKWebView : WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init]; WKWebView *webView = [[WKWebView alloc] initWithFrame:self. view. frame configuration:theConfiguration]; webView.


2 Answers

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

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

The reason why it doesn't work on safari iOS is because it considers mouse events(on desktop) different than the touch events(on 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

Yes it is possible in WebView. You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need. Have a look at jquery-ui-touch-punch. With this your drag and drop from Jquery UI would work on iOS or any device. You may use something like:

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

to convert mouse events into touch and it works like magic. Have a look at this tutorial on jQuery UI Touch Punch, with jQuery UI . Here's a cool article with demo on the same.

code courtesy

like image 59
nalinc Avatar answered Sep 20 '22 10:09

nalinc


Well, it is possible with a WebView. The actual answer is : how ? How, in order to get a great UX result. Mobile device is not a desktop, the actual solution is a matter of UX, dedicated to mobile:

You could use a longtap to make a card "flying/ready-for-drag" (turning scroll off). Or Use a zone/flat-button on the card, that users hook to drag it. Thoughts. You should absolutely avoid scroll & drag 'turned on' at the same time. It's drag OR scroll, never drag AND scroll.

EDIT You can use :

  • JQuery UI to manage dragging @ https://jqueryui.com/draggable/

  • JQuery Mobile vmouse events. (works well with mousemove, the best). @ https://api.jquerymobile.com/category/events/

like image 26
3pic Avatar answered Sep 19 '22 10:09

3pic