【发布时间】：2011-03-02 21:34:34
【问题描述】：
我有一个在 Firefox 和 Chrome 中工作的 jQuery UI draggable()。用户界面的概念基本上是点击创建一个“便利贴”类型的项目。
基本上，我单击或点击侦听单击的div#everything（100% 高和宽），然后显示输入文本区域。您添加文本，然后在完成后保存它。您可以拖动此元素。这适用于普通浏览器，但在我可以测试的 iPad 上，我无法拖动项目。如果我触摸选择（然后它会稍微变暗），我不能再拖动它。它根本不会向左或向右拖动。我可以向上或向下拖动，但我不是拖动单个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);
});
这是我用来“保存”笔记并将输入 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();
}
});
当我加载保存笔记的页面时，我有这个代码：
$('.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 的元素。
更多关于如何编写这样的 UI 组件的通用 cmets 也将受到欢迎。
谢谢！
更新：
我能够简单地将其链接到我的 jQuery UI draggable() 调用上，并在 iPad 上获得正确的可拖动性！
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
jQuery Touch plugin 成功了！
【问题讨论】：
-
我很好奇：你能用两根手指或三根手指拖动 div 吗？我知道您有时必须使用多个手指来滚动移动 Safari 中的嵌入内容，因此“可拖动”内容可能是相同的。
-
沃尔特·蒙德谢谢！我还没有尝试过任何手指的变化，等我拿到手再试试！
-
两个或三个手指实际上阻止了“整个页面”的无意滚动，但对可拖动没有任何改变。
-
不幸的是，这种技术似乎对我不起作用。 :(
-
@blaster 您需要查看其他一些答案以了解其他可能的解决方案
标签： jquery jquery-ui ipad draggable touchscreen