如何为触摸屏创建一个jQuery UI'draggable()'div draggable?

时间:2010-06-11 23:46:50

标签: jquery jquery-ui ipad draggable touchscreen

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

基本上,我点击或点击侦听点击的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组件的更多一般性评论也是受欢迎的。

谢谢!


更新 我能够简单地将其链接到我的jQuery UI draggable()调用,并在iPad上获得正确的可拖动性!

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

jQuery Touch plugin成功了!

7 个答案:

答案 0 :(得分:134)

在浪费了很多时间之后,我遇到了这个!

jquery-ui-touch-punch

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

我在iPad和iPhone上工作了

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

答案 1 :(得分:59)

警告:此答案写于2010年,技术发展迅速。有关更新的解决方案,请参阅@ctrl-alt-dileep's answer below


根据您的需要,您可以尝试jQuery touch plugin;你可以尝试一个例子here。它可以在我的iPhone上拖动,而jQuery UI Draggable则不行。

或者,您可以尝试使用this插件,但这可能需要您实际编写自己的可拖动功能。

作为旁注:信不信由你,我们听到越来越多关于iPad和iPhone等触控设备如何导致网站使用的问题:hover / onmouseover功能和可拖动内容。

如果您对此基础解决方案感兴趣,那就是使用三个新的JavaScript事件; ontouchstart,ontouchmove和ontouchend。 Apple实际上已经写了一篇关于它们使用的文章,你可以找到here。可以找到一个简化示例here。这些事件在我链接的两个插件中使用。

希望这有帮助!

答案 2 :(得分:24)

这个项目应该会有所帮助 - 将触摸事件映射到点击事件的方式允许jQuery UI在iPad和iPhone上运行而不做任何更改。只需将JS添加到任何现有项目中即可。

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

答案 3 :(得分:7)

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 doesn't work on touch devices based on Android or IOS

答案 4 :(得分:4)

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

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

答案 5 :(得分:2)

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

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

答案 6 :(得分:1)

您可以尝试使用 jquery.pep.js

  

jquery.pep.js 是一个轻量级的jQuery插件,可以转换任何DOM   元素成为可拖动的对象。它适用于大多数浏览器,   从旧到新,从触摸到点击。我建造它是为了满足需求   jQuery UI的可拖动性并没有实现,因为它不起作用   在触摸设备上(没有一些hackery)。

WebsiteGitHub link