Javascript Kéo và thả cho các thiết bị cảm ứng [đã đóng]

Tôi đang tìm kiếm một plugin kéo & DROP hoạt động trên các thiết bị cảm ứng.

Tôi muốn có chức năng tương tự như plugin jQuery UI cho phép các phần tử "có thể thả xuống".

Các jqtouch Plugin hỗ trợ kéo, nhưng không giảm.

Đây là tính năng kéo và thả chỉ hỗ trợ iPhone / iPad.

Có ai có thể chỉ cho tôi hướng plugin kéo và thả hoạt động trên android / ios không?

... Hoặc có thể cập nhật plugin jqtouch để có thể tải xuống, nó đã chạy trên Andriod và IOS.

Cảm ơn!

Bạn có thể sử dụng giao diện người dùng Jquery để kéo và thả với một thư viện bổ sung giúp chuyển các sự kiện chuột thành cảm ứng, đó là những gì bạn cần, thư viện tôi đề xuất là https://github.com/furf/jquery-ui-touch-punch , với điều này kéo và thả của bạn từ giao diện người dùng Jquery sẽ hoạt động trên các phát minh cảm ứng

hoặc bạn có thể sử dụng mã này mà tôi đang sử dụng, nó cũng chuyển đổi các sự kiện chuột thành cảm ứng và nó hoạt động như ma thuật.

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

Và trong tài liệu của bạn, chỉ cần gọi hàm init ()

mã được tìm thấy từ đây

Đối với bất kỳ ai muốn sử dụng tính năng này và giữ chức năng 'nhấp chuột' (như John Landheer đã đề cập trong nhận xét của mình), bạn có thể thực hiện chỉ với một vài sửa đổi:

Thêm một vài hình cầu:

var clickms = 100;
var lastTouchDown = -1;

Sau đó, sửa đổi câu lệnh switch từ bản gốc thành sau:

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

Bạn có thể muốn điều chỉnh 'clickms' theo sở thích của mình. Về cơ bản, nó chỉ theo dõi một 'touchstart' nhanh chóng theo sau là một 'touchhend' để mô phỏng một cú nhấp chuột.

Cảm ơn các mã trên! - Tôi đã thử một số lựa chọn và đây là vé. Tôi đã gặp sự cố trong đó PreventDefault ngăn không cho cuộn trên ipad - tôi hiện đang thử nghiệm các mục có thể kéo và nó hoạt động tốt cho đến nay.

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

Tôi đã có giải pháp tương tự như câu trả lời gregpress , nhưng các mục có thể kéo của tôi sử dụng một lớp thay vì một id. Nó dường như hoạt động.

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

Chủ đề cũ tôi biết .......

Vấn đề với câu trả lời của @ryuutatsuo là nó cũng chặn bất kỳ đầu vào hoặc phần tử nào khác phải phản ứng khi 'nhấp chuột' (ví dụ: đầu vào), vì vậy tôi đã viết giải pháp này. Giải pháp này giúp bạn có thể sử dụng bất kỳ thư viện kéo và thả hiện có nào dựa trên các sự kiện mousedown, mousemove và mouseup trên bất kỳ thiết bị cảm ứng nào (hoặc cumputer). Đây cũng là một giải pháp trình duyệt chéo.

Tôi đã thử nghiệm trên một số thiết bị và nó hoạt động nhanh (kết hợp với tính năng kéo và thả của ThreeDubMedia (xem thêm tại http://threedubmedia.com/code/event/drag )). Nó là một giải pháp jQuery nên bạn chỉ có thể sử dụng nó với jQuery libs. Tôi đã sử dụng jQuery 1.5.1 cho nó vì một số chức năng mới hơn không hoạt động đúng với IE9 trở lên (không được thử nghiệm với các phiên bản jQuery mới hơn).

Trước khi bạn thêm bất kỳ thao tác kéo hoặc thả nào vào một sự kiện, bạn phải gọi hàm này trước :

simulateTouchEvents(<object>);

Bạn cũng có thể chặn tất cả các thành phần / con cho đầu vào hoặc để tăng tốc độ xử lý sự kiện bằng cách sử dụng cú pháp sau:

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

Đây là mã tôi đã viết. Tôi đã sử dụng một số thủ thuật hay để tăng tốc độ đánh giá mọi thứ (xem mã).

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

Chức năng của nó: Lúc đầu, nó chuyển các sự kiện chạm đơn lẻ thành các sự kiện chuột. Nó kiểm tra xem một sự kiện có được gây ra bởi một phần tử trên / trong phần tử phải được kéo xung quanh hay không. Nếu nó là một phần tử đầu vào như input, textarea, v.v., nó sẽ bỏ qua bản dịch hoặc nếu một sự kiện chuột tiêu chuẩn được gắn vào nó, nó cũng sẽ bỏ qua bản dịch.

Kết quả: Mọi phần tử trên phần tử có thể kéo vẫn hoạt động.

Chúc bạn viết mã vui vẻ, helloz, Erwin Haantjes