art*_*ung 109 jquery jquery-ui touchscreen draggable ipad
我有一个draggable()适用于Firefox和Chrome 的jQuery UI .用户界面概念基本上是单击以创建"post-it"类型项.
基本上,我点击或点击div#everything(100%高和宽)听取点击,并显示输入textarea.您添加文本,然后在完成后保存它.你可以拖动这个元素.这适用于普通浏览器,但在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组件的更一般的评论也是受欢迎的.
谢谢!
更新:
我能够简单地将其链接到我的jQuery UI draggable()调用上,并在iPad上获得正确的可拖动性!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
在jQuery的触摸插件的伎俩!
ctr*_*eep 135
浪费了好几个小时后,我遇到了这个!
它将点击事件转换为点击事件.记得在jquery之后加载脚本.
我在iPad和iPhone上工作了
$('#movable').draggable({containment: "parent"});
von*_*rad 60
警告:这个答案写于2010年,技术发展迅速.有关更新的解决方案,请参阅下面的@ ctrl-alt-dileep的答案.
根据您的需要,您可能希望尝试jQuery touch插件 ; 你可以在这里试试一个例子.它可以很好地拖动我的iPhone,而jQuery UI Draggable则没有.
或者,您可以尝试使用此插件,但这可能需要您实际编写自己的可拖动功能.
作为旁注:信不信由你,我们听到越来越多关于iPad和iPhone等触控设备如何导致网站出现问题:hover/onmouseover功能和可拖动内容.
如果您对此基础解决方案感兴趣,那就是使用三个新的JavaScript事件; ontouchstart,ontouchmove和ontouchend.苹果实际上写了一篇关于它们使用的文章,你可以在这里找到.这里可以找到一个简化的例子.这些事件在我链接的两个插件中使用.
希望这可以帮助!
小智 24
这个项目应该是有用的 - 将触摸事件映射到单击事件的方式允许jQuery UI在iPad和iPhone上工作而不做任何更改.只需将JS添加到任何现有项目即可.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
jQuery ui 1.9将为您解决这个问题.下面是前面的演示:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
只需抓住jquery.mouse.ui.js,将它粘贴在你正在加载的jQuery ui文件下,这就是你应该做的全部!适用于可排序的工作.
这段代码对我很有用,但是如果你得到错误,可以在这里找到jquery.mouse.ui.js的更新版本:
Jquery-ui sortable不适用于基于Android或IOS的触摸设备