如何为触摸屏制作可拖动的 jQuery UI 'draggable()' div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3026915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a jQuery UI 'draggable()' div draggable for touchscreen?
提问by artlung
I have a jQuery UI draggable()that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item.
我有一个draggable()适用于 Firefox 和 Chrome的 jQuery UI 。用户界面概念基本上是单击以创建“便利贴”类型的项目。
Basically, I click or tap on div#everything(100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I candrag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage.
基本上，我点击或点击div#everything（100% 高和宽）来监听点击，并显示一个输入文本区域。您添加文本，然后在完成后将其保存。您可以四处拖动此元素。这适用于普通浏览器，但在 iPad 上我可以测试我无法拖动项目。如果我触摸选择（然后它会稍微变暗），我就不能拖动它。它根本不会向左或向右拖动。我可以向上或向下拖动，但我不是在拖动个人div，而是在拖动整个网页。
So here's the code I use to capture clicks:
所以这是我用来捕获点击的代码：
$('#everything').bind('click', function(e){
var elem = document.createElement('DIV');
STATE.top = e.pageY;
STATE.left = e.pageX;
var e = $(elem).css({
top: STATE.top,
left: STATE.left
}).html('<textarea></textarea>')
.addClass('instance')
.bind('click', function(event){
return false;
});
$(this).append(e);
});
And here's the code I use to "save" the note and turn the input div into just a display div:
这是我用来“保存”注释并将输入 div 转换为显示 div 的代码：
$('textarea').live('mouseleave', function(){
var val = jQuery.trim($(this).val());
STATE.content = val;
if (val == '') {
$(this).parent().remove();
} else {
var div = $(this).parent();
div.text(val).css({
height: '30px'
});
STATE.height = 30;
if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) {
while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) {
var h = div.height() + 10;
STATE.height = h;
div.css({
height: (h) + 'px'
}); // element just got scrollbars
}
}
STATE.guid = uniqueID()
div.addClass('savedNote').attr('id', STATE.guid).draggable({
stop: function() {
var offset = $(this).offset();
STATE.guid = $(this).attr('id');
STATE.top = offset.top;
STATE.left = offset.left;
STATE.content = $(this).text();
STATE.height = $(this).height();
STATE.save();
}
});
STATE.save();
$(this).remove();
}
});
And I have this code when I load the page for saved notes:
当我加载保存笔记的页面时，我有这个代码：
$('.savedNote').draggable({
stop: function() {
STATE.guid = $(this).attr('id');
var offset = $(this).offset();
STATE.top = offset.top;
STATE.left = offset.left;
STATE.content = $(this).text();
STATE.height = $(this).height();
STATE.save();
}
});
My STATEobject handles saving the notes.
我的STATE对象处理保存笔记。
Onload, this is the whole html body:
Onload，这是整个html主体：
<body>
<div id="everything"></div>
<div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div>
<div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div>
<div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div>
<div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div>
<div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div>
</body>
So, my question is really: how can I make this work better on iPad?
所以，我的问题是：我怎样才能在 iPad 上更好地工作？
I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs.
我没有设置 jQuery UI，我想知道这是否是我在 jQuery UI 或 jQuery 上做错的事情，或者是否可能有更好的框架来执行跨平台/向后兼容的可拖动（）元素为触摸屏 UI 工作。
More general comments about how to write UI components like this would be welcome as well.
关于如何编写这样的 UI 组件的更多一般性评论也将受到欢迎。
Thanks!
谢谢！
UPDATE:I was able to simply chain this onto my jQuery UI draggable()call and get the correct draggability on iPad!
更新：我能够简单地将它链接到我的 jQuery UIdraggable()调用上，并在 iPad 上获得正确的可拖动性！
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
The jQuery Touch plugindid the trick!
在jQuery的触摸插件的伎俩！
回答by ctrl-alt-dileep
After wasting many hours, I came across this!
浪费了几个小时后，我遇到了这个！
It translates tap events as click events. Remember to load the script after jquery.
它将点击事件转换为点击事件。记得在 jquery 之后加载脚本。
I got this working on the iPad and iPhone
我在 iPad 和 iPhone 上得到了这个
$('#movable').draggable({containment: "parent"});
回答by vonconrad
Caution:This answer was written in 2010 and technology moves fast. For a more recent solution, see @ctrl-alt-dileep's answer below.
注意：这个答案是在 2010 年写的，技术发展很快。有关更新的解决方案，请参阅下面的@ctrl-alt-dileep 的回答。
Depending on your needs, you may wish to try the jQuery touch plugin; you can try an example here. It works fine to drag on my iPhone, whereas jQuery UI Draggable doesn't.
根据您的需要，您可能希望尝试使用jQuery touch 插件；你可以在这里尝试一个例子。在我的 iPhone 上拖动效果很好，而 jQuery UI Draggable 则不行。
Alternatively, you can try thisplugin, though that might require you to actually write your own draggable function.
或者，您可以尝试使用此插件，尽管这可能需要您实际编写自己的可拖动功能。
As a sidenote: Believe it or not, we're hearing increasing buzz about how touch devices such as the iPad and iPhone is causing problems both for websites using :hover/onmouseover functions and draggable content.
作为旁注：信不信由你，我们听到越来越多的关于 iPad 和 iPhone 等触摸设备如何给使用 :hover/onmouseover 功能和可拖动内容的网站带来问题的议论。
If you're interested in the underlying solution for this, it's to use three new JavaScript events; ontouchstart, ontouchmove and ontouchend. Apple actually has written an article about their use, which you can find here. A simplified example can be found here. These events are used in both of the plugins I linked to.
如果您对此的底层解决方案感兴趣，那就是使用三个新的 JavaScript 事件；ontouchstart、ontouchmove 和 ontouchend。Apple 实际上已经写了一篇关于它们使用的文章，你可以在这里找到。可以在此处找到一个简化示例。这些事件用于我链接到的两个插件。
回答by Steve
This project should be helpful - maps touch events to click events in a way that allows jQuery UI to work on iPad and iPhone without any changes. Just add the JS to any existing project.
这个项目应该会有所帮助 - 以一种允许 jQuery UI 无需任何更改即可在 iPad 和 iPhone 上工作的方式将触摸事件映射到点击事件。只需将 JS 添加到任何现有项目即可。
回答by thatmiddleway
jQuery ui 1.9 is going to take care of this for you. Heres a demo of the pre:
jQuery ui 1.9 会为你解决这个问题。这是预的演示：
https://dl.dropbox.com/u/3872624/lab/touch/index.html
https://dl.dropbox.com/u/3872624/lab/touch/index.html
Just grab the jquery.mouse.ui.js out, stick it under the jQuery ui file you're loading, and that's all you should have to do! Works for sortable as well.
只需取出 jquery.mouse.ui.js，将其粘贴在您正在加载的 jQuery ui 文件下，这就是您要做的全部工作！也适用于可排序。
This code is working great for me, but if your getting errors, an updated version of jquery.mouse.ui.js can be found here:
这段代码对我来说非常有用，但是如果您遇到错误，可以在此处找到 jquery.mouse.ui.js 的更新版本：
Jquery-ui sortable doesn't work on touch devices based on Android or IOS
回答by boulder_ruby
This project on github may be your solution
github上的这个项目可能是你的解决方案
回答by heyman
I was struggling with a similar problem yesterday. I already had a "working" solution using jQuery UI's draggable together with jQuery Touch Punch, which are mentioned in other answers. However, using this method was causing weird bugs in some Android devices for me, and therefore I decided to write a small jQuery plugin that can make HTML elements draggable by using touch events instead of using a method that emulates fake mouse events.
昨天我正在努力解决类似的问题。我已经有了一个使用 jQuery UI 的可拖动和 jQuery Touch Punch 的“工作”解决方案，其他答案中提到了这些解决方案。然而，使用这种方法会在一些 Android 设备中导致一些奇怪的错误，因此我决定编写一个小的 jQuery 插件，它可以通过使用触摸事件而不是使用模拟假鼠标事件的方法使 HTML 元素可拖动。
The result of this is jQuery Draggable Touchwhich is a simple jQuery plugin for making elements draggable, that has touch devices as it's main target by using touch events (like touchstart, touchmove, touchend, etc.). It still has a fallback that uses mouse events if the browser/device doesn't support touch events.
其结果是jQuery Draggable Touch，它是一个简单的 jQuery 插件，用于使元素可拖动，通过使用触摸事件（如 touchstart、touchmove、touchend 等）将触摸设备作为主要目标。如果浏览器/设备不支持触摸事件，它仍然有一个使用鼠标事件的回退。
回答by martynas
You can try using jquery.pep.js:
您可以尝试使用jquery.pep.js：
jquery.pep.jsis a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI's draggable was not fulfilling, since it didn't work on touch devices (without some hackery).
jquery.pep.js是一个轻量级的 jQuery 插件，它可以将任何 DOM 元素变成一个可拖动的对象。它适用于几乎所有浏览器，从旧到新，从触摸到点击。我构建它是为了满足 jQuery UI 的可拖动无法满足的需求，因为它不能在触摸设备上工作（没有一些hacky）。
