Enable dragging in UIWebView / WKWebView

20
votes

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)

4
javascriptiosuiwebviewwkwebview
CSS property -webkit-user-drag: is an option. But that has to be done for the respective element.. In iOS, the scroll will clash with the drag. Normally disabling scrollview's scrollEnabled and bounces property would allow dragging. I don't think that is a viable solution for you here for two reasons.. Firstly, i think the board themselves scroll. So chances are the above mentioned option may not work and secondly It would be difficult to use a website as trello on a phone without being able to scroll . – Subbu
to get rid of the scrolling issue, i wonder if there could be click-and-hold... for maybe a couple of seconds... before allowing the board to be moved. And dragging with no initial hold would scroll as normal. – cannyboy
Are you getting the touch events in your JS? – Fred
You'd have to do two things: 1. Listen for touch* events and fire the corresponding mouse* events (don't forget to copy all X and Y data, and call preventDefault on touchmove to prevent page scrolling while dragging, but only draggable elements, otherwise scrolling & zooming is not gonna work) and 2. manually enable dragging on Trello, because they disable is for mobile devices (search for isTouch() in their JS files). They use jQueryUI's draggable & droppable, but they somehow use droppable for the draggables... and everything is wrapped inside a gazillion closures. – Siguza
Dragging can be easily done with hammerjs but i don't know how you could modify the source of trello.com to allow that. – Rahat Mahbub

4 Answers

8
votes

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

2
votes

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 :

1
votes

In case you are just wondering if there is a simple way to enable drag&drop cross-platform even on mobile, I may suggest you to use Interact.js, a nice UI interaction library I've used successfully in multiple projects.

Using a little code you can achieve a working drag&drop, like this:

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

You can find this working example I've just built here: http://codepen.io/leonardfactory/pen/MwPBjZ

I've tested it on mobile safari, and it works just fine, allowing drag&drop. You can find further documentation on its doc page.

I hope this answers your question, if your needs are more specific, feel free to comment and I'll try to edit my answer to adapt it.

-1
votes

I'm not sure if this is what you need, but take a look at this jquery-ui-touch-punch.

It handles the touchevents (touchstart, touchmove, touchend) in order to work properly.

Take a look at the demopage, where you can try it out on your mobile device touchpunch demo page.