draggable
属性似乎对触摸设备上的浏览器没有影响。
<div draggable="true">Draggable Box</div>
https://jsfiddle.net/41z5uz4t/
用鼠标,我可以拖动这个元素。如果我尝试在触摸屏(Windows 10,Chrome)上拖动它,常规触摸事件(例如导航回来)似乎优先。我试着拿着它,然后拖着。这也不起作用。
是否有用于修复Chrome中此行为的polyfill?我应该做些不同的事吗?
答案 0 :(得分:2)
Draggable属性是&#34; experimental technology&#34;目前,任何主流移动浏览器都不支持它。
如果你想制作一个Drag&#39; n&#39; Drop UI,你应该使用一些JS库,比如greensock nice library和Touchpunch with jQuery UI,还有更多的搜索幅。
主要的移动浏览器今天我已经明确表示可拖动属性不支持。
修改强>
使用像您这样的触摸屏设备似乎是Chrome中的错误我找到了可能对您有帮助的解决方案:
转到chrome://标志并更改&#34;启用触摸事件&#34;设置自&#34;自动&#34;到&#34;启用&#34;。当前版本的Chrome显然没有检测到Windows 10的触控功能。
找到here。
但是,如果这是一个实验属性,你最好使用js库进行该操作。
答案 1 :(得分:2)
您可以使用jQuery来实现此效果。以下是如何执行此操作的指南:
将此代码放在具有可拖动对象的行之前:
<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
。