SORU
11 HAZİRAN 2010, Cuma

Nasıl bir jQuery UI 'sürüklenebilir yapabilir miyim()' sürüklenebilir dokunmatik ekran için div?

Firefox ve Chrome içinde çalışan bir jQuery UI draggable() var. Arayüz kavramı temelde tıklatın oluşturmak için kullanıcı bir "post-it" türü madde.

Temelde, ben veya tıklama dinleyen div#everything (100%) yüksek ve geniş dokunun tıklatın ve giriş button görüntüler. Metin ekleyin ve sonra işiniz bittiğinde onu kaydeder. Bu öğe etrafında sürükleyebilirsiniz. Normal tarayıcılar üzerinde çalışıyor, ama bir iPad öğeleri etrafında çekemem ile test edebilirim. Ben seçmek için (o zaman biraz karartır) dokunursanız, o zaman çekemem. Sol veya sağ hiç sıkıcı olmaz. Benolabiliryukarı veya aşağı sürükleyin, ancak bireysel div, bütün web durgunum durgunum.

Burada tıklama yakalamak için kullandığım kod şu:

$('#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);
});

Ve burada "" Not ve sadece görünen bir div içine div: giriş çevirin . kaydetmek için kullandığım kod

$('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();
    }
});

Ve ben kaydedilen notlar için sayfa yük zaman bu kodu var:

$('.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 benim nesne notları kaydetme işler.

Yüklendiğinde, bu tüm html cesedini

<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>

Yani, benim soru gerçekten: nasıl iPad daha iyi yapabilir miyim?

Değilim setinde jQuery UI, merak ediyorum eğer bu bir şey yaptığımın yanlış ile jQuery UI, ya da DV ya da belki daha iyi çerçeveleri için yapıyor çapraz platform/geriye uyumlu sürüklenebilir() elemanları ise yarar için dokunmatik ekran Arayüzü.

Bu hoş olurdu gibi UI bileşenleri yazma hakkında daha genel bir yorum.

Teşekkürler!

GÜNCELLEME: Sadece draggable() jQuery UI benim çağrı üzerine bu zincir ve iPad doğru draggability bulabildim!

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

jQuery Touch plugin hile yaptı!

CEVAP
7 ŞUBAT 2012, Salı

Kaç saat harcıyorsun sonra, bu noktaya geldim!

jquery-ui-touch-punch

Click olayları gibi olaylar dokunun çevirir. Sonra jquery komut dosyası yüklemek için unutma.

Bu iPad üzerinde çalışıyor, ve iPhone var

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Dil Eklentisi-UıJqueryİpadJquery-uiSürüklenebilirIpadDV Dokunmatik EkranDraggable

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Artorius FullPower

    Artorius Ful

    29 Temmuz 2007
  • Majestic Casual

    Majestic Cas

    28 NİSAN 2012
  • Mismag822 - The Card Trick Teacher

    Mismag822 -

    18 EKİM 2008

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR