如何使jQuery UI'draggable()'div可拖动到触摸屏?


112

我有一个draggable()可在Firefox和Chrome中使用的jQuery UI 。用户界面的概念基本上是单击以创建“便利贴”类型的项目。

基本上,我单击或轻击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的触摸插件的伎俩!


1
我对某事感到好奇:您能用两三个手指拖着div吗?我知道您有时必须用多个手指滚动移动Safari中的嵌入式内容,因此“可拖动”内容可能是相同的。
Walter Mundt 2010年

Walter Mundt谢谢!我没有尝试过任何手指的变化,当我拿到它时会尝试的!
artlung 2010年

1
实际上,两三根手指可以防止“整个页面”意外滚动,但是对于可拖动对象却没有任何改变。
artlung 2010年

不幸的是,这种技术似乎对我不起作用。:(
blaster

@blaster您需要查看其他一些可能的解决方案的答案
artlung 2011年

Answers:


138

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

jQuery UI触摸打孔

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

我在iPad和iPhone上工作了

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

2
此解决方案效果很好,我厌倦的另一个答案是越野车,但实际上并没有帮助
musefan 2012年

一个小技巧:效果很好,尽管如果可拖动元素覆盖有一层图像(上面有一个蒙版),则不会激活任何拖动,但是解决方案是添加指针事件:无;在顶层。
Adler 2014年

这是一个很棒且简单的解决方案,您只需使用插件并继续使用JQuery可拖动功能即可。很好,谢谢!
几乎是初学者

这将防止可拖动项中的可点击项。
阿卜杜勒·萨迪克·雅尔辛

61

注意:此答案写于2010年,技术发展日新月异。有关最新的解决方案,请参见下面的@ ctrl-alt-dileep的答案


根据您的需求,您不妨尝试一下jQuery touch插件;你可以在这里尝试一个例子。在我的iPhone上拖动可以正常工作,而jQuery UI Draggable则不能。

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

附带说明:信不信由你,我们正在听到越来越多的嗡嗡声,如iPad和iPhone等触摸设备如何对使用:hover / onmouseover功能和可拖动内容的网站造成问题。

如果您对此感兴趣,请使用三个新的JavaScript事件。ontouchstart,ontouchmove和ontouchend。苹果实际上写了一篇有关它们使用的文章,您可以在这里找到。一个简化的例子可以在这里找到。我链接到的两个插件都使用了这些事件。


2
超级棒!我所要做的就是将其链接.touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });到我现有的draggable()电话上,这很有效!为了使工作流正确运行,我仍然必须解决所有我想处理的事件,但是jQuery touch插件成功了!
artlung

4
该插件似乎在jquery.com上不再可用。您仍然可以在此处找到javascript 清单manifestinteractive.com/iphone/touch/js/jquery.touch.js
bjelli 2010年

1
嘿,现在manifestinteractive.com也缺少该插件。试试这个: plugins.jquery.com/files/jquery.touch.js.txt
Ian Hunter

5
这个答案不再有效。请参阅下面的@ ctrl-alt-dileep答案(jquery-ui-touch-punch),以获得2012年的答案
bjelli

1
@bjelli感谢您指出这一点。我已经用警告更新了答案。:)
vonconrad 2012年


7

jQuery ui 1.9将为您解决这一问题。以下是pre的演示:

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

只需将jquery.mouse.ui.js拿出来,将其粘贴在要加载的jQuery ui文件下,这就是您所要做的!也适用于可排序。

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

jQuery-ui sortable在基于Android或IOS的触摸设备上不起作用


3
他们正在处理此1.9,这太好了。FWIW,我发现该演示中的代码版本中存在错误,但效果不佳。有人在这个问题上发布了一个更正确的版本:stackoverflow.com/questions/6745098/…对我来说效果更好。
asgeo1 2011年

我更新了答案以解决此问题。我的原始用例还没有出现任何错误。
thatmiddleway 2011年

1
Dropbox链接已关闭。
BerggreenDK 2013年


2

昨天我也在努力解决类似的问题。我已经有了一个使用jQuery UI的可拖动对象以及jQuery Touch Punch的“有效”解决方案,其他答案中对此进行了提及。但是,使用这种方法给我造成了一些Android设备中的怪异错误,因此,我决定编写一个小型jQuery插件,该插件可以通过使用触摸事件而不是使用模拟假鼠标事件的方法来使HTML元素可拖动。

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


嗨,海曼,那真是棒极了。感谢分享。它也适用于可调整大小的jQuery吗?
哈里斯(Haris)

1

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

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

网站GitHub链接


1
谢谢@martynas,我来看看!
artlung 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.