如何为触摸屏创建一个jQuery UI'draggable（）'div draggable？ [英] How can I make a jQuery UI 'draggable()' div draggable for touchscreen?
问题描述
我有一个jQuery UI draggable（），适用于Firefox和Chrome。用户界面概念基本上是单击以创建post-it类型项目。
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％高和宽）侦听点击，并显示输入textarea。您添加文本，然后在完成后保存它。你可以拖动这个元素。这适用于普通浏览器，但在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.
Onload，这是整个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时出错，或者是否有更好的表现用于执行跨平台/向后兼容的draggable（）元素的框架，适用于触摸屏UI。
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 draggable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
