我怎样才能让一个jQuery UI'draggable()'div可拖动触摸屏?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (304)

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

基本上,我点击或点击div#everything(100%高和宽),监听点击,并显示输入textarea。你添加文本,然后当你完成它保存它。你可以拖动这个元素。这是在正常的浏览器上工作,但在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()元素的框架,适用于触摸屏用户界面。

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

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

jQuery的触摸插件的伎俩!

提问于
用户回答回答于

jQuery的UI触摸冲

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

我在iPad和iPhone上工作

$('#movable').draggable({containment: "parent"});
用户回答回答于

根据您的需要,您可能希望尝试jQuery touch插件 ; 你可以在这里尝试一个例子。它可以很好地拖动我的iPhone,而jQuery UI Draggable不会。

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

作为旁注:信不信由你,我们听到越来越多的关于iPad和iPhone等触摸设备对使用以下功能的网站造成问题的嗡嗡声:hover / onmouseover功能和可拖动内容。

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

扫码关注云+社区

领取腾讯云代金券