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?

score 2 · Answer 1 · edited Jan 31 '17 at 08:57

2

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.

edited Jan 31 '17 at 08:57

marc_s

732,580
175
1,330
1,459

answered Nov 28 '16 at 00:14

Cuzi

1,026
10
16

I'm not asking about mobile browsers, I'm asking about desktop browsers with touch. – Brad Nov 29 '16 at 00:13
The behavior of the libraries you linked to don't properly emulate the browser's `draggable` behavior. – Brad Nov 29 '16 at 00:18
Unfortunately that setting has no effect on my systems. – Brad Nov 29 '16 at 21:50

user7214865 · Answer 2 · 2019-02-22T18:31:46.877

1

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.

edited Feb 22 '19 at 18:31

answered Nov 28 '16 at 00:15

user7214865

131
2
6

This isn't really the behavior provided by `draggable` in-browser. I guess I'll have to just write my own polyfill. – Brad Nov 29 '16 at 00:16

Draggable attribute on touch devices

2 Answers2