Kéo thả trên thiết bị di động sử dụng một số mã dịch sự kiện (bao gồm mã), nhưng sự kiện bình thường không hoạt động

Question

Tôi đang sử dụng mã bên dưới để cho phép kéo và thả cảm ứng trên trang web của mình. Tuy nhiên, trong khi các phần của mã của tôi có chức năng kéo/thả hoạt động, trên iPhone, tôi không thể cuộn hoặc di chuyển trang. Tôi có thể kéo thả &, nhưng chức năng cảm ứng iPhone thông thường đã biến mất!

Tôi đã tìm thấy đoạn mã dưới đây trong một số phản hồi lưu lượng truy cập stackoverflow vì vậy tôi tự hỏi liệu có giải pháp cho việc này hay không. Tôi muốn có thể kéo & thả trên cả hai trang web & thiết bị di động.

Cảm ơn!

đang kéo tôi (chỉ là một danh sách):

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

mã cho sự kiện liên lạc:

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

Tôi đã làm việc trên cùng một vấn đề và nghĩ rằng tôi chỉ liếm nó. Tôi gỡ bỏ ruột của touchHandler và sử dụng chúng để điền vào gọi lại chỉ liên kết người nghe sự kiện với con của <div id='stage'>. Dưới đây là mã của tôi bằng cách sử dụng jquery. Hi vọng điêu nay co ich!

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

Bạn đang ngăn chặn các chức năng cuộn mặc định với dòng mã này:

event.preventDefault(); 

Vì đối tượng sự kiện này được gắn với tài liệu, tất cả các cuộn gốc đều bị tắt.

Nếu bạn muốn cho phép cuộn trang một cách tự nhiên, hãy thêm trình xử lý sự kiện vào phần tử tài liệu (theo cách đó nếu người dùng cuộn trong vùng khác với vùng chứa có thể sắp xếp, họ sẽ có thể cuộn trang bình thường) .

Thay đổi:

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

Để:

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