Olayı çeviren bir kod kullanarak mobil aygıtlarda açılan sürükle (kod dahil), ancak normal olaylar çalışmıyor

Question

Web sitemde dokunarak sürükleyip bırakmaya izin vermek için aşağıdaki kodu kullanıyorum. Bununla birlikte, benim sürükle/bırak işlevine sahip kodumun parçaları bir iPhone'da çalışırken, yine de sayfayı kaydırılamıyor veya taşıyamıyorum. &'u sürükleyip bırakabilirim, ancak normal iPhone dokunma işlevi gitti!

Aşağıdaki parçacıkları birkaç stackoverflow yanıtında buldum, bu yüzden bunun için bir çözüm olup olmadığını merak ediyorum. Web'de hem & hem de web & cep telefonuna bırakabilmek istiyorum.

Teşekkürler!

benim sürükleme kodu (sadece liste): Dokunmatik olaylar için

$(function() { 
    $(".drag_me ul").sortable(); 
}); 

kodu:

function touchHandler(event) 
{ 
var touches = event.changedTouches, 
    first = touches[0], 
    type = ""; 

    switch(event.type) 
{ 
    case "touchstart": type = "mousedown"; break; 
    case "touchmove": type="mousemove"; break;   
    case "touchend": type="mouseup"; break; 
    default: return; 
} 
var simulatedEvent = document.createEvent("MouseEvent"); 
simulatedEvent.initMouseEvent(type, true, true, window, 1, 
          first.screenX, first.screenY, 
          first.clientX, first.clientY, false, 
          false, false, false, 0/*left*/, null); 

first.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);  
} 

Answer 1

aynı sorun üzerinde çalışıyoruz ve oldum ben sadece yaladı düşünüyorum. TouchHandler'ın bağırsaklarını kaldırdım ve olay dinleyicilerini yalnızca <div id='stage'>'un çocuklarına bağlayan geri bildirimi doldurmak için kullanıyorum. Aşağıda jquery kullanarak kodum var. Bu yardımcı olur umarım!

function init(){ 


$("#stage").children().bind('touchstart touchmove touchend touchcancel', function(){ 
    var touches = event.changedTouches, first = touches[0], type = ""; 
    switch(event.type){  
     case "touchstart": type = "mousedown"; 
    break;  
     case "touchmove": type="mousemove"; 
    break;    
     case "touchend": type="mouseup"; 
    break;  
     default: return; 
    } 

    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
         first.screenX, first.screenY, 
         first.clientX, first.clientY, false, 
         false, false, false, 0/*left*/, null); 
    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
    }); 
} 

Answer 2

Sen bu kod satırı ile varsayılan kaydırma işlevselliği engelliyor:

event.preventDefault(); 

Bu olay nesnesi belgeye bağlı olduğundan, tüm yerel kaydırmalar devre dışı bırakılmıştır.

Sayfanın doğal olarak kaydırılmasına izin vermek istiyorsanız, olay dinleyicilerinizi belge öğesinin bir alt öğeye ekleyin (böylece kullanıcı, sıralı bir konteynırdan başka bir bölgede kaydırırsa, sayfayı normal olarak kaydırır). .

Değişimi:

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

için:

function init() 
{ 
    $('#sortable_container').bind('touchstart touchmove touchend touchcancel', touchHandler); 
}