如何使jQuery UI“draggable()”div可用于触摸屏?

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.

我有一个在Firefox和Chrome中工作的jQuery UI draggable()。用户界面的概念基本上是单击以创建“post-it”类型项。

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.

基本上，我点击或点击div#所有能监听点击的东西(100%高和宽)，然后显示一个输入文本区域。你添加文本，当你完成后，它会保存它。你可以拖拽这个元素。这在正常的浏览器上是可行的，但是在iPad上我可以用我不能拖拽的东西来测试。如果我点击选择(它会稍微变暗)，我就不能拖拽它。它不会向左或向右拖动。我可以向上或向下拖拽，但我没有拖拽单独的div，而是拖拽整个网页。

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);
});

And here's the code I use to "save" the note and turn the input div into just a display div:

下面是我用来“保存”注释并将输入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();
    }
});

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();
    }
});

My STATE object handles saving the notes.

我的状态对象处理保存notes。

Onload, this is the whole html body:

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>

So, my question is really: how can I make this work better on iPad?

所以，我的问题是:我如何才能在iPad上做得更好?

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.

我没有设置jQuery UI，我想知道这是否是我在jQuery UI或jQuery上做错的事情，或者是否有更好的框架来实现跨平台/向后兼容的draggable()元素，这些元素将用于触摸屏UI。

More general comments about how to write UI components like this would be welcome as well.

更多关于如何编写这样的UI组件的一般性评论也会受到欢迎。

Thanks!

谢谢!

UPDATE: I was able to simply chain this onto my jQuery UI draggable() call and get the correct draggability on iPad!

更新:我可以简单地将其链接到我的jQuery UI draggable()调用，并在iPad上获得正确的拖放功能!

.touch({
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
});

The jQuery Touch plugin did the trick!

jQuery Touch插件成功了!

7 个解决方案

#1

130

After wasting many hours, I came across this!

浪费了好几个小时之后，我遇到了这个!

jquery-ui-touch-punch

It translates tap events as click events. Remember to load the script after jquery.

它将tap事件转换为click事件。记得在jquery之后加载脚本。

I got this working on the iPad and iPhone

我在iPad和iPhone上工作。

$('#movable').draggable({containment: "parent"});

#2

Caution: This answer was written in 2010 and technology moves fast. For a more recent solution, see @ctrl-alt-dileep's answer below.

注意:这个答案写于2010年，技术发展很快。有关更近期的解决方案，请参见下面的@ctrl-alt-dileep的答案。

Depending on your needs, you may wish to try the jQuery touch plugin; you can try an example here. It works fine to drag on my iPhone, whereas jQuery UI Draggable doesn't.

根据您的需要，您可能希望尝试jQuery touch插件;您可以在这里尝试一个例子。拖拽我的iPhone很好用，而jQuery UI Draggable不行。

Alternatively, you can try this plugin, though that might require you to actually write your own draggable function.

另外，您也可以尝试这个插件，尽管这可能需要您实际编写自己的可拖动函数。

As a sidenote: Believe it or not, we're hearing increasing buzz about how touch devices such as the iPad and iPhone is causing problems both for websites using :hover/onmouseover functions and draggable content.

作为旁注:信不信由你，我们听到越来越多的关于iPad和iPhone等触控设备如何给网站带来问题的议论:鼠标悬停/onmouseover功能和可拖动内容。

If you're interested in the underlying solution for this, it's to use three new JavaScript events; ontouchstart, ontouchmove and ontouchend. Apple actually has written an article about their use, which you can find here. A simplified example can be found here. These events are used in both of the plugins I linked to.

如果您对底层解决方案感兴趣，可以使用三个新的JavaScript事件;ontouchstart,ontouchmove ontouchend。苹果已经写了一篇关于它们的使用的文章，你可以在这里找到。这里可以找到一个简化的例子。这些事件在我链接到的两个插件中都使用。

Hope this helps!

希望这可以帮助!

#3

This project should be helpful - maps touch events to click events in a way that allows jQuery UI to work on iPad and iPhone without any changes. Just add the JS to any existing project.

这个项目应该是有帮助的——地图触摸事件以一种允许jQuery UI在iPad和iPhone上工作而不发生任何变化的方式点击事件。只需将JS添加到任何现有项目中。

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

#4

jQuery ui 1.9 is going to take care of this for you. Heres a demo of the pre:

jQuery ui 1.9会帮你解决这个问题。下面是pre的演示:

https://dl.dropbox.com/u/3872624/lab/touch/index.html

Just grab the jquery.mouse.ui.js out, stick it under the jQuery ui file you're loading, and that's all you should have to do! Works for sortable as well.

只是抓住jquery.mouse.ui。把它放在正在加载的jQuery ui文件下面，这就是你要做的!也适用于sortable。

This code is working great for me, but if your getting errors, an updated version of jquery.mouse.ui.js can be found here:

这段代码对我来说非常有用，但是如果您收到错误，请使用jquery.mouse.ui的更新版本。js可以在这里找到:

Jquery-ui sortable doesn't work on touch devices based on Android or IOS

Jquery-ui sortable不支持基于Android或IOS的触控设备

#5

This project on github may be your solution

github上的这个项目可能是您的解决方案。

https://github.com/furf/jquery-ui-touch-punch

#6

I was struggling with a similar problem yesterday. I already had a "working" solution using jQuery UI's draggable together with jQuery Touch Punch, which are mentioned in other answers. However, using this method was causing weird bugs in some Android devices for me, and therefore I decided to write a small jQuery plugin that can make HTML elements draggable by using touch events instead of using a method that emulates fake mouse events.

我昨天遇到了一个类似的问题。我已经有了一个“工作”的解决方案，使用jQuery UI的拖放功能和jQuery Touch Punch，这在其他答案中也有提到。然而，使用这个方法在一些Android设备中给我带来了奇怪的错误，因此我决定编写一个小jQuery插件，通过使用触摸事件而不是使用模拟鼠标事件的方法来使HTML元素可以被拖拽。

The result of this is jQuery Draggable Touch which is a simple jQuery plugin for making elements draggable, that has touch devices as it's main target by using touch events (like touchstart, touchmove, touchend, etc.). It still has a fallback that uses mouse events if the browser/device doesn't support touch events.

这样做的结果是jQuery Draggable Touch，它是一个简单的jQuery插件，用于使元素可以被拖拽，它通过使用触摸事件(如touchstart、touchmove、touchend等)将触摸设备作为主要目标。如果浏览器/设备不支持触摸事件，它仍然会使用鼠标事件。

#7

You can try using jquery.pep.js:

你可以尝试使用jquery.pe .js:

jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery).

jquery.pep。js是一个轻量级的jQuery插件，它将任何DOM元素转换成可拖动的对象。它适用于几乎所有的浏览器，从旧的到新的，从触摸到点击。我构建它是为了满足jQuery UI的可拖放功能不满足的需求，因为它不能在触控设备上工作(没有一些黑客)。

Website, GitHub link

网站,GitHub链接

#1

130