触摸设备上的可拖动属性

时间:2016-09-08 21:16:40

标签: html5 drag-and-drop draggable drag html5-draggable

draggable属性似乎对触摸设备上的浏览器没有影响。

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

https://jsfiddle.net/41z5uz4t/

用鼠标,我可以拖动这个元素。如果我尝试在触摸屏(Windows 10,Chrome)上拖动它,常规触摸事件(例如导航回来)似乎优先。我试着拿着它,然后拖着。这也不起作用。

是否有用于修复Chrome中此行为的polyfill?我应该做些不同的事吗?

2 个答案:

答案 0 :(得分:2)

Draggable属性是&#34; experimental technology&#34;目前,任何主流移动浏览器都不支持它。

如果你想制作一个Drag&#39; n&#39; Drop UI,你应该使用一些JS库,比如greensock nice libraryTouchpunch with jQuery UI,还有更多的搜索幅。

主要的移动浏览器今天我已经明确表示可拖动属性不支持

修改

使用像您这样的触摸屏设备似乎是Chrome中的错误我找到了可能对您有帮助的解决方案:

  

转到chrome://标志并更改&#34;启用触摸事件&#34;设置自&#34;自动&#34;到&#34;启用&#34;。当前版本的Chrome显然没有检测到Windows 10的触控功能。

找到here

但是,如果这是一个实验属性,你最好使用js库进行该操作。

答案 1 :(得分: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