API kéo và thả HTML5 trên thiết bị màn hình cảm ứng

Question

Tôi đã tự hỏi liệu HTML5 API cho Kéo và Thả có hỗ trợ hiển thị màn hình cảm ứng hay không.

Tôi đã nghĩ đến iPhone nhưng tôi biết điều này chưa được hỗ trợ. Tôi đã tự hỏi liệu đó có phải chỉ là bắt kịp một phần của Apple, để hỗ trợ kéo và thả HTML5 trên Safari di động, nhưng tôi cũng nghĩ rằng HTML5 API không đủ mạnh cho điều này, nhưng tôi rất nghi ngờ điều đó.

Làm thế nào về trên một máy tính bảng màn hình cảm ứng tiêu chuẩn hoặc tương tự, tôi không có một vì vậy tôi không thể kiểm tra nhưng tôi sẽ tưởng tượng rằng hỗ trợ được bao gồm bởi vì, như xa như tôi biết, giao diện bảng chỉ thay thế điều khiển chuột, vì vậy, theo như trình duyệt có liên quan, người dùng cuối thực sự chỉ sử dụng chuột.

Mọi suy nghĩ?

Answer 1

Có một số sự kiện HTML5 gốc hoạt động trong WebKit (Chrome & Safari) ... chỉ các phiên bản di động. Tên của những sự kiện này được touchstart, touchmove, touchend, touchcancel

Một ví dụ để di chuyển một phần tử là:

$(document).bind("touchstart", function(e) { 
e.preventDefault(); 
var orig = e.originalEvent; 
var x = orig.changedTouches[0].pageX; 
var y = orig.changedTouches[0].pageY; 

$("#element").css({top: y, left: x}); 
}); 

Thông tin thêm: http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

BTW Tôi thích làm việc với webkit-transform (Thuộc tính CSS) vì nó có hiệu suất tốt hơn.

Chúc may mắn

Answer 2

Cũ chủ đề nhưng kể từ khi tôi đã có một số kinh nghiệm và nó vẫn là một vấn đề, tôi sẽ cho nó một shot ...

Touch và kéo/thả không thực sự chơi độc đáo cùng với nhau. Hãy xem xét việc kéo và thả, bạn có một chuỗi các sự kiện di chuyển chuột xuống => mouse-move =>. Trong một môi trường cảm ứng, bạn không chỉ có các sự kiện touchstart, touchmove và touchend tiêu chuẩn mà còn có các cử chỉ thực tế có ý nghĩa cụ thể trên các nền tảng đa dạng. Những cử chỉ này là sự kết hợp của các sự kiện cảm ứng, thứ tự của chúng và thời gian của chúng.

Vậy làm cách nào để bạn kéo một phần tử bằng cách chạm? Bằng cách chụp touchstart và touchmove? Không. Do vấn đề về ngón tay, hầu như mọi sự kiện cảm ứng đều có cả touchstart và touchmove. Bạn cũng có thể có hai touchstarts chỉ với một touchmove thỉnh thoảng với một màn hình bẩn.

Làm thế nào để chụp hình cảm ứng và sau đó chờ xem liệu người dùng đã di chuyển một khoảng cách nhất định? Không, vấn đề ở đây là người dùng sẽ thấy 'trục trặc' khi anh ta di chuyển ngón tay 15 pixel (hoặc bất kỳ khoảng cách nào) và không có gì xảy ra và sau đó phần tử suddently snaps đến vị trí ngón tay của mình. Phản ứng bình thường là nhấc ngón tay, mà trong trường hợp này sẽ bắt đầu một giọt, câu trả lời sai. Cuối cùng, cố gắng phát triển một giao diện trong đó một số yếu tố là văn phòng phẩm và những yếu tố khác có thể, nhưng không nhất thiết phải, khả năng kéo được cố gắng để vừa với môi trường máy tính để bàn thành một thiết bị cảm ứng. Các mô hình không phù hợp.

Tốt hơn để xem các khung cảm ứng khác nhau và sử dụng các cử chỉ tích hợp.

Answer 3

Có cùng một vấn đề, sau đây là một vài miễn phí giải pháp:

http://touchpunch.furf.com/

http://www.createjs.com/#!/EaselJS/demos/dragdrop