blocks|key|304075|text|jQuery+UI触摸打孔机恰好解决了这一切。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|304076|这是对jQuery+UI的触摸事件支持。基本上，它只是将触摸事件连接回jQuery+UI。在iPad、iPhone、安卓和其他触控移动设备上进行了测试。我使用了jQuery+UI+sortable，它的效果非常出色。|304077|http://touchpunch.furf.com/|offset|length|304078|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

jQuery UI Touch Punch just solves it all. 

It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI.
Tested on iPad, iPhone, Android and other touch-enabled mobile devices.
I used jQuery UI sortable and it works like a charm.

<a href="http://touchpunch.furf.com/" rel="noreferrer">http://touchpunch.furf.com/</a>

blocks|key|306094|text|有一个新的polyfill用于将触摸事件转换为拖放，这样HTML5拖放就可以在移动设备上使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|306095|polyfill是由Bernardo+Castilho在this+post上介绍的。|offset|length|306096|下面是这篇文章的demo。|306097|这篇文章还提出了几个关于folyfill设计的考虑因素。|306098|entityMap|0|LINK|mutability|MUTABLE|url|https://www.codeproject.com/Articles/1091766/Add-support-for-standard-HTML-Drag-and-Drop-operat|1|http://bernardo-castilho.github.io/DragDropTouch/demo/^0|0|S|9|0|0|8|4|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

There is a new polyfill for translating touch events to drag-and-drop, such that HTML5 Drag And Drop is utilizable on mobile.

The polyfill was introduced by Bernardo Castilho on <a href="https://www.codeproject.com/Articles/1091766/Add-support-for-standard-HTML-Drag-and-Drop-operat" rel="noreferrer">this post</a>.

Here's a <a href="http://bernardo-castilho.github.io/DragDropTouch/demo/" rel="noreferrer">demo</a> from that post.

The post also presents several considerations of the folyfill design.

blocks|key|3249117|text|我需要创建一个拖放%2B旋转，适用于桌面，移动，平板电脑，包括windows+phone。最后一个使它变得更加复杂(mspointer+vs.触摸事件)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3249118|解决方案来自伟大的Greensock+library|offset|length|3249119|要使同样的对象可拖动和旋转，需要经过一些跳跃，但它工作得很完美|3249120|entityMap|0|LINK|mutability|MUTABLE|url|http://www.greensock.com/draggable/^0|0|9|H|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I needed to create a drag and drop + rotation that works on desktop, mobile, tablet including windows phone. The last one made it more complicated (mspointer vs. touch events).

The solution came from The great <a href="http://www.greensock.com/draggable/" rel="nofollow noreferrer">Greensock library</a>

It took some jumping through hoops to make the same object draggable and rotatable but it works perfectly

blocks|key|3249074|text|Sencha+Touch的测试版支持拖放。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3249075|你可以参考他们的DnD+Example。顺便说一句，这只适用于webkit浏览器。|3249076|将这种逻辑改造成网页可能会很困难。据我所知，它们禁用了所有浏览器平移，并完全用javascript实现了平移事件，从而允许正确地解释拖放。|3249077|更新：原来的示例链接已经死了，但我找到了这个替代链接：|style|BOLD|3249078|https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch|3249079|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sencha.com/products/touch/|1|http://www.sencha.com/deploy/touch/examples/dragdrop/|2^0|0|C|0|0|8|B|1|0|0|0|3|0|0|1P|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|17|8|@$A|18|B|19|J|K]]|9|@]|C|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|N|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]|X|$5|Q|R|S|C|$T|M]]]]

The beta version of <a href="http://www.sencha.com/products/touch/" rel="nofollow noreferrer">Sencha Touch</a> has drag and drop support.

You can refer to their <a href="http://www.sencha.com/deploy/touch/examples/dragdrop/" rel="nofollow noreferrer">DnD Example</a>. This only works on webkit browsers by the way.

Retrofitting that logic into a web page is probably going to be difficult. As I understand it they disable all browser panning and implement panning events entirely in javascript, allowing correct interpretation of drag and drop.

Update: the original example link is dead, but I found this alternative: 
<a href="https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch" rel="nofollow noreferrer">https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch</a>

blocks|key|300964|text|你也可以尝试一下，当然和Bernardo+Castilho的相似(见@remdevtec答案)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300965|只需执行npm+install+mobile-drag-drop+--save+(其他可用的安装方法，例如使用bower)|offset|length|style|CODE|300966|然后，任何依赖于触摸检测的元素界面都应该在移动设备上工作(例如，只拖动一个元素，而不是同时滚动%2B拖动)。|300967|entityMap^0|0|4|Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

You might as well give a try to <a href="http://timruffles.github.io/mobile-drag-drop/demo/" rel="nofollow noreferrer">Tim Ruffle's drag-n-drop polyfill</a>, certainly similar to Bernardo Castilho's one (see @remdevtec answer).

Simply do <code>npm install mobile-drag-drop --save</code> (other installation methods available, e.g. with bower)

Then, any element interface relying on touch detection should work on mobile (e.g. dragging only an element, instead of scrolling + dragging at the same time).

blocks|key|3249221|text|Sortable+JS+library与触摸屏兼容，不需要jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3249222|库大小为43KB。|3249223|官方网站在一段视频中表示，这个库的运行速度比JQuery+UI+Sortable快。|3249224|entityMap|0|LINK|mutability|MUTABLE|url|https://sortablejs.github.io/Sortable/^0|0|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

The <a href="https://sortablejs.github.io/Sortable/" rel="nofollow noreferrer">Sortable JS library</a> is compatible with touch screens and does not require jQuery.
The library size is 43KB.
The official website states in a video that this library is running faster than JQuery UI Sortable.

blocks|key|3034934|text|以下是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3034935|$(el).on('touchstart',+function(e)+{
++++var+link+=+$(e.target.parentNode).closest('a')++
++++if(link.length+>+0)+{
++++++++window.location.href+=+link.attr('href');
++++}
});|code-block|syntax|javascript|3034936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

here is my solution:

<pre><code>$(el).on('touchstart', function(e) {
 var link = $(e.target.parentNode).closest('a') 
 if(link.length &gt; 0) {
 window.location.href = link.attr('href');
 }
});
</code></pre>

blocks|key|3249185|text|Jquery+Touch+Punch很棒，但它也会禁用可拖动div上的所有控件，因此为了防止出现这种情况，您必须更改代码行……(在撰写本文时-第75行)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3249186|变化|3249187|if+(touchHandled+%7C%7C+!self._mouseCapture(event.originalEvent.changedTouches[0])){|code-block|syntax|javascript|3249188|阅读|3249189|if+(touchHandled+%7C%7C+!self._mouseCapture(event.originalEvent.changedTouches[0])+%7C%7C+event.originalEvent.target.localName+===+'textarea'
++++++++%7C%7C+event.originalEvent.target.localName+===+'input'+%7C%7C+event.originalEvent.target.localName+===+'button'+%7C%7C+event.originalEvent.target.localName+===+'li'
++++++++%7C%7C+event.originalEvent.target.localName+===+'a'
++++++++%7C%7C+event.originalEvent.target.localName+===+'select'+%7C%7C+event.originalEvent.target.localName+===+'img')+{|3249190|为你想‘解锁’的每个元素添加任意数量的ors|3249191|希望这能帮助到某些人|3249192|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Jquery Touch Punch is great but what it also does is disable all the controls on the draggable div so to prevent this you have to alter the lines... (at the time of writing - line 75)

change

<pre><code>if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){
</code></pre>

to read

<pre><code>if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
 || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
 || event.originalEvent.target.localName === 'a'
 || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {
</code></pre>

add as many ors as you want for each of the elements you want to 'unlock'

Hope that helps someone

blocks|key|304134|text|对于vue+3，有https://github.com/SortableJS/vue.draggable.next|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|304135|对于vue+2，它是https://github.com/SortableJS/Vue.Draggable|304136|后者您可以像这样使用：|304137|<draggable+v-model="myArray"+group="people"+@start="drag=true"+@end="drag=false">
+++<div+v-for="element+in+myArray"+:key="element.id">{{element.name}}</div>
</draggable>|code-block|syntax|javascript|304138|它们是基于sortable.js的|304139|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/SortableJS/vue.draggable.next|1|https://github.com/SortableJS/Vue.Draggable^0|9|1C|0|0|A|17|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

For vue 3, there is <a href="https://github.com/SortableJS/vue.draggable.next" rel="nofollow noreferrer">https://github.com/SortableJS/vue.draggable.next</a>
For vue 2, it's <a href="https://github.com/SortableJS/Vue.Draggable" rel="nofollow noreferrer">https://github.com/SortableJS/Vue.Draggable</a>
The latter you can use like this:
<pre><code>&lt;draggable v-model=&quot;myArray&quot; group=&quot;people&quot; @start=&quot;drag=true&quot; @end=&quot;drag=false&quot;&gt;
 &lt;div v-for=&quot;element in myArray&quot; :key=&quot;element.id&quot;&gt;{{element.name}}&lt;/div&gt;
&lt;/draggable&gt;
</code></pre>
These are based on sortable.js

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?

All solutions welcome... my initial thoughts are:

<ol>
<li>Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.</li>
<li>Write an app that does this for mobile devices rather then try and get the web page to work on them!</li>
<li>Your suggestions and comments please.</li>
</ol>

HTML Drag And Drop On Mobile Devices

jQuery

HTML5

当你使用JavaScript向网页添加拖放功能时，比如jQuery UI draggable和droppable，当你在移动设备上通过浏览器查看时，你如何让它工作--在这种情况下，拖拽的触摸屏操作会被手机截获，以便在页面上滚动等等？欢迎所有解决方案...我最初的想法是：为移动设备提供了一个按钮，该按钮可将要拖动的项目“抬起”，然后让移动设备单击要将项目拖放到的区域。为移动设备编写一个应用程序来执行

问移动设备上的HTML拖放
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动设备上的HTML拖放EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动设备上的HTML拖放
EN