我怎样才能使一个jQuery UI'draggable（）'div可拖动触摸屏？
我有一个jQuery UI的draggable()在Firefox和Chrome的作品。 用户界面的概念基本上是点击创build一个“贴子”types的项目。
基本上，我点击或点击div#everything监听点击的div#everything （100％高和宽），并显示一个inputtextarea。 你添加文本，然后当你完成它保存它。 你可以拖动这个元素。 这是正常的浏览器上工作，但在iPad上我可以testing，我不能拖动项目周围。 如果我触摸select（然后稍微变暗），我不能拖动它。 它不会左右拖动。 我可以向上或向下拖动，但我不拖动个人div ，我拖动整个网页。
所以这里是我用来捕获点击的代码：
$('#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); });
这里是我用来“保存”音符并将inputdiv转换为显示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(); } });
当我加载保存的笔记页面时，我有这个代码：
$('.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(); } });
我的STATE对象处理保存笔记。
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>
所以，我的问题是：我怎样才能使这个工作在iPad上更好？
我没有设置jQuery UI，我想知道这是我做错了jQuery UI或jQuery，或者是否有更好的框架做跨平台/向后兼容的draggable（）元素，将为触摸屏用户界面工作。
关于如何编写这样的UI组件的更一般的评论也是受欢迎的。
谢谢！
更新：我可以简单地链接到我的jQuery UI draggable()调用，并获得正确的draggable()性在iPad上！
.touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });
jQuery Touch插件取得了诀窍！
浪费了好几个小时后，我碰到了这个！
jQuery的UI触摸冲
它将点击事件翻译为点击事件。 记得在jquery之后加载脚本。
我在iPad和iPhone上工作
$('#movable').draggable({containment: "parent"});
警告：这个答案是在2010年写的，技术移动速度很快。 有关更新的解决scheme，请参阅下面的@ ctrl-alt-dileep的答案 。
根据您的需要，您可能希望尝试jQuery touch插件 ; 你可以在这里尝试一个例子。 它可以正常拖动我的iPhone，而jQuery UI Draggable不。
另外，你也可以试试这个插件，虽然这可能需要你自己写可拖动的函数。
作为一个旁注：信不信由你，我们听到越来越多的关于触摸设备，如iPad和iPhone如何使网站使用：hover / onmouseoverfunction和可拖动的内容造成问题的嗡嗡声。
如果你对底层的解决scheme感兴趣，那就是使用三个新的JavaScript事件; ontouchstart，ontouchmove和ontouchend。 苹果实际上已经写了一篇关于他们的使用的文章，你可以在这里find。 一个简单的例子可以在这里find。 这些事件在我链接到的两个插件中使用。
希望这可以帮助！
这个项目应该是有帮助的 – 将触摸事件映射到点击事件的方式，允许jQuery UI在iPad和iPhone上工作而不做任何改变。 只需将JS添加到任何现有的项目。
jQuery的用户界面1.9将为你照顾这个。 下面是一个演示：
https://dl.dropbox.com/u/3872624/lab/touch/index.html
只需抓住jquery.mouse.ui.js，将其粘贴到您正在加载的jQuery ui文件中，这就是您应该做的所有事情！ 作品也可以sorting。
这段代码对我来说很好，但是如果你得到错误，可以在这里findjquery.mouse.ui.js的更新版本：
Jquery-uisorting不适用于基于Android或IOS的触摸设备
这个项目在github上可能是你的解决scheme
昨天我也遇到了类似的问题。 我已经有了一个“工作”的解决scheme，使用jQuery UI的可拖动和jQuery Touch Punch，在其他答案中提到。 然而，使用这种方法在我的一些Android设备上造成了一些奇怪的错误，因此我决定编写一个小的jQuery插件，通过使用触摸事件而不是使用模拟假鼠标事件的方法来使HTML元素可拖动。
这样做的结果是jQuery Draggable Touch ，它是一个简单的jQuery插件，用于使元素可拖动，通过使用触摸事件（如touchstart，touchmove，touchend等）将触摸设备作为主要目标。 如果浏览器/设备不支持触摸事件，它仍然会使用鼠标事件。
你可以尝试使用jquery.pep.js ：
jquery.pep.js是一个轻量级的jQuery插件，可以将任何DOM元素转换为可拖动的对象。 它适用于大多数浏览器，从旧到新，从触摸到点击。 我构build它，以满足jQuery UI的可拖动性无法满足的需求，因为它不适用于触摸设备（没有一些hackery）。
网站 ， GitHub链接
