cho phép kéo và thả trên thiết bị di động màn hình cảm ứng

Question

Tôi vừa mới nhận được điện thoại Android và thấy rằng việc kéo và thả trên trang web của tôi không hoạt động! Tôi hiểu tại sao nó sẽ không, nhưng có ai tìm thấy một giải pháp cho điều này? Tôi đang sử dụng JQuery để triển khai D & D ...

Answer 1

IPhone ít nhất có các sự kiện nhất định như ontouchstart, ontouchend, vv Đây là một phần của webkit, nhưng có rất ít thông tin liên quan đến Android hơn iPhone . Tôi nghĩ câu trả lời cho câu hỏi này là chức năng kéo và thả cần phải sử dụng những sự kiện đó thay vì các sự kiện bạn thường sử dụng, hoặc cần sử dụng cả hai.

Bài viết này có thể quan tâm - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Answer 2

Có một kéo jQuery và thả plugin mà đã hỗ trợ cho điện thoại di động thiết bị/màn hình cảm ứng:

http://plugins.jquery.com/project/mobiledraganddrop

Trên một thiết bị di động, bạn chạm để chọn mục và chạm để chọn vị trí thả. Điều này xung quanh vấn đề hành động kéo đang bị tấn công bởi thiết bị/trình duyệt.

Answer 3

Tôi tìm thấy một ví dụ mà làm việc trên màn hình cảm ứng máy tính bảng Android của tôi http://www.quirksmode.org/m/tests/drag.html Nó sử dụng "sự kiện ontouchstart"

Answer 4

Cũ chủ đề Tôi biết .......

tôi có ở đây một giải pháp mà tôn trọng bất kỳ đầu vào hoặc yếu tố nào khác phải phản ứng trên 'nhấp chuột' (ví dụ: đầu vào) trên phần tử có thể kéo. 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 chuột, chuột và chuột trên bất kỳ thiết bị cảm ứng nào (hoặc máy tính bảng). Đây cũng là một giải pháp đa trình duyệt.

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

Trước bạn thêm bất kỳ kéo hoặc thả hoạt động đến một sự kiện bạn phải gọi hàm này đầu tiên:

simulateTouchEvents(<object>); 

Bạn cũng có thể chặn tất cả các thành phần/trẻ em 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; 
}; 

Điều này có nghĩa là: Lúc đầu, nó dịch các sự kiện chạm một lần vào sự kiện chuột. Nó kiểm tra nếu một sự kiện được gây ra bởi một phần tử trên/trong phần tử phải được kéo xung quanh. Nếu nó là một phần tử đầu vào như đầu vào, văn bản, v.v., nó bỏ qua bản dịch, hoặc nếu một sự kiện chuột chuẩn được gắn vào nó, nó cũng sẽ bỏ qua một 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.

mã hóa Chúc mừng, Greetz, Erwin Haantjes

Answer 5

tôi đã sử dụng jQuery UI touch cú đấm - nó hoạt động bằng cách hack mousedown, tính năng mouseup và thay thế chúng với touchstart, touchend, vv

GIỚI THIỆU: http://touchpunch.furf.com/

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

Mã sản phẩm:

bao gồm:

<script src="jquery.ui.touch-punch.min.js"></script> 

sau jquery tập tin kịch bản giao diện người dùng của bạn trong tiêu đề của bạn.

Answer 6

Tôi đã sử dụng câu trả lời của touchpunch ở trên và nó hoạt động tốt. Một lưu ý về nó, mặc dù. Tôi thấy rằng bằng cách sử dụng liên kết github trên trang web (trở lên):

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

đã không làm việc cho các thiết bị Android đang chạy di động Chrome, nhưng liệu, nguồn có thể đọc được con người từ các trang web đã công việc . Đây là ngày của bài đăng này, nó có thể được cố định tất nhiên, nhưng trong thời gian có thể nó sẽ giúp bạn tiết kiệm một vài chu kỳ gỡ lỗi.