如何为触摸屏制作可拖动的 jQuery UI 'draggable()' div? [英] How can I make a jQuery UI 'draggable()' div draggable for touchscreen?
问题描述
我有一个适用于 Firefox 和 Chrome 的 jQuery UI draggable().用户界面的概念基本上是点击创建一个便利贴"类型的项目.
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.
基本上，我点击或点击 div#everything(100% 高和宽)来监听点击，并显示输入文本区域.您添加文本，然后在完成后将其保存.您可以四处拖动此元素.这适用于普通浏览器，但在 iPad 上我可以测试我无法拖动项目.如果我触摸选择(然后它会稍微变暗)，我就无法拖动它.它根本不会向左或向右拖动.我可以向上或向下拖动，但我不是拖动单个div，而是拖动整个网页.
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 can drag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage.
这里是我用来捕获点击的代码:
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);
});
这是我用来保存"笔记并将输入 div 变成显示 div 的代码:
And here's the code I use to "save" the note and turn the input div into just a display 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();
}
});
我的 STATE 对象处理保存笔记.
My STATE object handles saving the notes.
加载，这是整个html正文:
Onload, this is the whole html body:
<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 上更好地工作?
So, my question is really: how can I make this work better on iPad?
我没有设置 jQuery UI，我想知道这是否是我在 jQuery UI 或 jQuery 上做错的地方，或者是否有更好的框架来执行跨平台/向后兼容的可拖动()适用于触摸屏用户界面的元素.
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.
也欢迎更多关于如何编写这样的 UI 组件的一般性评论.
More general comments about how to write UI components like this would be welcome as well.
谢谢！
更新:我能够简单地将它链接到我的 jQuery UI draggable() 调用并在 iPad 上获得正确的可拖动性！
UPDATE:
I was able to simply chain this onto my jQuery UI draggable() call and get the correct draggability on iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
jQuery Touch 插件成功了！
推荐答案
在浪费了好几个小时之后，我发现了这个！
After wasting many hours, I came across this!
它将点击事件转换为点击事件.记得在jquery之后加载脚本.
It translates tap events as click events. Remember to load the script after jquery.
我在 iPad 和 iPhone 上完成了这项工作
I got this working on the iPad and iPhone
$('#movable').draggable({containment: "parent"});
这篇关于如何为触摸屏制作可拖动的 jQuery UI 'draggable()' div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
