代码之家 › 专栏 › 技术社区 › artlung

如何为触摸屏创建jQuery UI“draggable()”div draggable?

touchscreen draggable ipad jquery-ui jquery

108

artlung · 技术社区 · 14 年前

我有一个jqueryui draggable()

基本上,我点击或点击 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 对象处理保存注释。

<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上工作得更好?

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

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

更新: 可拖动()

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

这个 jQuery Touch plugin 成功了!

7 回复 | 直到 14 年前

141

ctrl-alt-dileep 12 年前

在浪费了很多时间之后,我发现了这个!

jquery-ui-touch-punch

记住在jquery之后加载脚本。

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

CÅur N0mi 5 年前

注意事项: 这个答案写于2010年,技术发展很快。有关最新的解决方案,请参阅 @ctrl-alt-dileep's answer below .

根据您的需要,您可以尝试 jQuery touch plugin ; 你可以举个例子 here . 在我的iPhone上拖动效果很好,而jqueryui-Draggable则不行。

this 插件,尽管这可能需要您实际编写自己的可拖动函数。

here . 可以找到一个简化的例子 here . 我链接到的两个插件都使用了这些事件。

Steve 14 年前

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

Community Ian Goodfellow 7 年前

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

只需取出jquery.mouse.ui.js,将其粘贴到正在加载的jqueryui文件下,就可以了!也适用于可排序。

这段代码对我来说非常有用,但是如果您遇到错误,可以在下面找到jquery.mouse.ui.js的更新版本:

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

boulder_ruby 12 年前

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

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

heyman 11 年前

昨天我也遇到了类似的问题。我已经有了一个使用jqueryui的draggable和jquerytouchpunch的“工作”解决方案,这在其他答案中提到过。然而,使用这种方法在一些Android设备上给我带来了奇怪的bug,因此我决定编写一个小jQuery插件,它可以通过使用touch事件来拖拽HTML元素,而不是使用模拟假鼠标事件的方法。

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

martynas 10 年前

jquery.pep.js :

jquery.pep.js 是一个轻量级jQuery插件,可以打开任何DOM 元素添加到可拖动对象中。它适用于所有浏览器, 从旧到新,从触摸到点击。我建造它是为了满足未来的需要哪个jqueryuis draggable没有实现,因为它不工作触控设备(没有黑客攻击)。

Website GitHub link