Javascript Dokunmatik cihazlar için sürükle ve bırak [kapalı]

Dokunmatik cihazlarda çalışan bir sürükle ve bırak eklentisi arıyorum.

"Bırakılabilir" öğelere izin veren jQuery UI eklentisine benzer işlevsellik istiyorum .

Eklenti jqtouch sürükleyerek destekler, ancak hiçbir düşüyor.

İşte sürükle & sadece iPhone / iPad desteklediğini damla.

Herkes beni android / ios üzerinde çalışan bir sürükle ve bırak eklentisi yönüne yönlendirebilir mi?

... Veya jqtouch eklentisini düşebilirlik için güncellemek mümkün olabilir, zaten Andriod ve IOS üzerinde çalışıyor.

Teşekkürler!

Fare olaylarını dokunmaya çeviren ek bir kitaplıkla birlikte sürükle ve bırak için Jquery kullanıcı arayüzünü kullanabilirsiniz, bu da ihtiyacınız olan şeydir, önerdiğim kitaplık https://github.com/furf/jquery-ui-touch-punch , bu, Jquery kullanıcı arayüzünden sürükle ve bırak yönteminiz dokunmatik cihazlarda çalışmalıdır

ya da benim kullandığım bu kodu kullanabilirsiniz, aynı zamanda fare olaylarını dokunmaya dönüştürüyor ve sihir gibi çalışıyor.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

Ve belgenizde zaten init () işlevini çağırın

kod adlı bulundu Burada

Bunu kullanmak ve 'tıklama' işlevini korumak isteyen herkes için (John Landheer'in yorumunda bahsettiği gibi), bunu sadece birkaç değişiklikle yapabilirsiniz:

Birkaç küresel ekleyin:

var clickms = 100;
var lastTouchDown = -1;

Ardından, switch ifadesini orijinalden buna değiştirin:

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

'Tıklamaları' zevkinize göre ayarlamak isteyebilirsiniz. Temel olarak, bir tıklamayı simüle etmek için sadece bir 'dokunma başlangıcı' izliyor ve ardından hızlıca bir 'dokunma sonu' geliyor.

Yukarıdaki kodlar için teşekkürler! - Birkaç seçeneği denedim ve bu biletti. ÖnlemeDefault'un ipad'de kaydırmayı engellemesi konusunda sorunlar yaşadım - şimdi sürüklenebilir öğeleri test ediyorum ve şimdiye kadar harika çalışıyor.

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

Gregpress answer ile aynı çözüme sahiptim , ancak sürüklenebilir öğelerim bir id yerine bir sınıf kullanıyordu. İşe yarıyor gibi görünüyor.

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

Bildiğim eski konu .......

@Ryuutatsuo'nun cevabıyla ilgili sorun, 'tıklamalara' (örneğin girdiler) tepki vermesi gereken herhangi bir girişi veya diğer öğeleri de engellemesidir, bu yüzden bu çözümü yazdım. Bu çözüm, herhangi bir dokunmatik cihaz (veya cumputer) üzerinde fare indirme, fare imleci ve fareyi kaldırma olaylarına dayanan mevcut herhangi bir sürükle ve bırak kitaplığının kullanılmasını mümkün kıldı. Bu aynı zamanda tarayıcılar arası bir çözümdür.

Ben birkaç cihaz üzerinde de test ettik ve hızlı çalışır (ThreeDubMedia sürükle ve bırak özelliği ile kombinasyon halinde (bkz http://threedubmedia.com/code/event/drag )). Bu bir jQuery çözümüdür, bu nedenle onu yalnızca jQuery kitaplıkları ile kullanabilirsiniz. Bunun için jQuery 1.5.1 kullandım çünkü bazı yeni işlevler IE9 ve üstü ile düzgün çalışmıyor (jQuery'nin yeni sürümleriyle test edilmedi).

Bir olaya herhangi bir sürükle veya bırak işlemi eklemeden önce, önce bu işlevi çağırmanız gerekir :

simulateTouchEvents(<object>);

Aşağıdaki sözdizimini kullanarak giriş için tüm bileşenleri / alt öğeleri engelleyebilir veya olay işlemeyi hızlandırabilirsiniz:

simulateTouchEvents(<object>, true); // ignore events on childs

İşte yazdığım kod. Bir şeyleri değerlendirmeyi hızlandırmak için bazı güzel numaralar kullandım (koda bakın).

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

Ne yapar: İlk başta, tek dokunuş olaylarını fare olaylarına çevirir. Bir olayın, sürüklenmesi gereken öğenin üzerindeki / içindeki bir öğeden kaynaklanıp kaynaklanmadığını kontrol eder. Girdi, metin alanı vb. Gibi bir girdi öğesiyse çeviriyi atlar veya buna standart bir fare olayı eklenmişse çeviriyi de atlar.

Sonuç: Sürüklenebilir bir öğedeki her öğe hala çalışıyor.

Mutlu kodlama, greetz, Erwin Haantjes