Draggable attribute on touch devices

Question

The draggable attribute seems to have no effect in browsers on touch devices.

<div draggable="true">Draggable Box</div>

https://jsfiddle.net/41z5uz4t/

With a mouse, I can drag this element around. If I try to drag it around on my touch screen (Windows 10, Chrome), regular touch events, such as navigating back, seem to take precedence. I've tried holding it, then dragging. This doesn't work either.

Is there a polyfill for fixing this behavior in Chrome? Am I supposed to be doing something different?

Answer 1

Draggable attribute is "experimental technology" it is currently not supported on any of the major mobile browsers.

If you wnat to make an Drag'n'Drop UI you should use some JS library for that, like, greensock nice library and Touchpunch with jQuery UI and there are much more just search on the web.

I'll just make that clear the draggable attribute is not supported today by the major mobile browsers.

EDIT:

Seems that it is bug in Chrome with the touch screen devices like yours I found a solution that maybe could help you:

Go to chrome://flags and change the "Enable Touch Events" setting from "Automatic" to "Enable". The current version of Chrome apparently does not detect the touch capabilities of Windows 10.

found here.

Still, if that is an experimental attribute you better use an js library for that action.

Answer 2

You can use jQuery to achieve this effect. Here is a guide on how to do that:

http://touchpunch.furf.com/

Put this code before the line with the draggable object:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

And put this after the line with the draggable object:

<script>$('#draggablebox').draggable();</script>, assuming the div has the id draggablebox.