connecttosortable - jquery ui draggable widget




我怎樣才能讓一個jQuery UI'draggable()'div可拖動觸摸屏? (5)

我有一個draggable()在Firefox和Chrome中使用的jQuery UI draggable() 。 用戶界面的概念基本上是點擊來創建一個“貼子”類型的項目。

基本上,我點擊或點擊div#everything監聽點擊的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()元素的框架,適用於觸摸屏用戶界面。

關於如何編寫這樣的UI組件的更一般的評論也會受到歡迎。

謝謝!

更新:我可以簡單地鏈接到我的jQuery UI draggable()調用,並在iPad上獲得正確的draggable()

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

jQuery Touch插件取得了訣竅!



警告:這個答案是在2010年編寫的,技術運行速度很快。 對於更新的解決方案,請參閱下面的@ ctrl-alt-dileep的答案 。

根據您的需要,您可能希望嘗試jQuery touch插件 ; 你可以here嘗試一個例子。 它可以很好地拖動我的iPhone,而jQuery UI Draggable不會。

或者,您可以嘗試使用this插件,但這可能需要您實際編寫自己的可拖動功能。

作為旁注:信不信由你,我們聽到越來越多的關於觸摸設備(如iPad和iPhone)對網站使用:hover / onmouseover功能和可拖動內容造成問題的嗡嗡聲。

如果您對底層解決方案感興趣,那就是使用三個新的JavaScript事件; ontouchstart,ontouchmove和ontouchend。 蘋果實際上已經寫了一篇關於他們的使用的文章,你可以在here找到。 一個簡單的例子可以在here找到。 這些事件都用於我鏈接到的兩個插件中。

希望這可以幫助!


昨天我也遇到了類似的問題。 我已經有了一個“工作”的解決方案,使用jQuery UI的可拖動功能和jQuery Touch Punch,在其他答案中提到了這一點。 然而,使用這種方法給我帶來了一些Android設備中的奇怪錯誤,因此我決定編寫一個小的jQuery插件,通過使用觸摸事件而不是使用模擬假鼠標事件的方法來使HTML元素可拖動。

這樣做的結果是jQuery Draggable Touch ,它是一個簡單的jQuery插件,用於使元素可拖動,通過使用觸摸事件(如touchstart,touchmove,touchend等)將觸摸設備作為主要目標。 如果瀏覽器/設備不支持觸摸事件,它仍然會使用鼠標事件。


浪費了好幾個小時後,我碰到了這個!

jquery-ui-touch-punch

它將點擊事件轉換為點擊事件。 請記住在jquery之後加載腳本。

我在iPad和iPhone上工作

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





touchscreen