Перетаскиваемый атрибут на сенсорных устройствах

Question

Атрибут draggable, похоже, не действует в браузерах на сенсорных устройствах.

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

https://jsfiddle.net/41z5uz4t/

С помощью мыши, можно перетащить этот элемент вокруг. Если я попытаюсь перетащить его на свой сенсорный экран (Windows 10, Chrome), обычные события касания, такие как перемещение назад, похоже, имеют приоритет. Я попытался удержать его, а затем перетащить. Это тоже не работает.

Есть ли полипол для исправления этого поведения в Chrome? Должен ли я делать что-то другое?

Answer 1

Атрибут Draggable - «experimental technology» в настоящее время не поддерживается ни в одном из основных мобильных браузеров.

Если вы хотите создать пользовательский интерфейс Drag'n'Drop, вы должны использовать некоторую библиотеку JS для этого, например, greensock nice library и Touchpunch with jQuery UI, и есть гораздо больше просто поиск в Интернете.

Я просто проясню, что перетаскиваемый атрибут не поддерживается сегодня основными мобильными браузерами.

EDIT:

Кажется, что это ошибка в Chrome с сенсорным экраном устройства, как у вас, я нашел решение, которое, возможно, может помочь вам:

Перейти к хром: // флаги и измените параметр «Включить сенсорные события» с «Автоматический» на «Включить». Текущая версия Chrome, по-видимому, не обнаруживает сенсорных возможностей Windows 10.

here.

Тем не менее, если это экспериментальный атрибут, вам лучше использовать библиотеку js для этого действия.

Answer 2

Используйте jQuery для достижения этого эффекта. Вот руководство о том, как сделать это:

http://touchpunch.furf.com/

Поместите этот код перед строкой с перетаскиваемом объекта:

<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> 

И поставить это после того, как линии с перетаскиваемом объекта:

<script>$('#draggablebox').draggable();</script>, предполагая, что div имеет идентификатор draggablebox.