Kéo và thả HTML trên thiết bị di động

Khi bạn thêm tính năng kéo và thả vào một trang web bằng JavaScript, chẳng hạn như giao diện người dùng jQuery có thể kéo và thả xuống, làm cách nào để bạn có thể làm cho điều này hoạt động khi được xem qua trình duyệt trên thiết bị di động - nơi các thao tác kéo trên màn hình cảm ứng bị chặn bởi điện thoại để cuộn quanh trang, v.v.?

Tất cả các giải pháp đều được hoan nghênh ... suy nghĩ ban đầu của tôi là:

1. Có một nút dành cho thiết bị di động để "nâng" mục cần kéo và sau đó yêu cầu chúng nhấp vào khu vực họ muốn thả mục đó vào.

2. Viết một ứng dụng thực hiện điều này cho các thiết bị di động thay vì thử và làm cho trang web hoạt động trên chúng!

3. Xin vui lòng đề xuất và nhận xét của bạn.

jQuery UI Touch Punch giải quyết tất cả.

Đó là Hỗ trợ sự kiện cảm ứng cho giao diện người dùng jQuery. Về cơ bản, nó chỉ chuyển sự kiện chạm trở lại giao diện người dùng jQuery. Đã thử nghiệm trên iPad, iPhone, Android và các thiết bị di động hỗ trợ cảm ứng khác. Tôi đã sử dụng giao diện người dùng jQuery có thể sắp xếp và nó hoạt động như một sự quyến rũ.

http://touchpunch.furf.com/

Có một polyfill mới để dịch các sự kiện chạm sang kéo và thả, chẳng hạn như tính năng Kéo và thả trong HTML5 có thể sử dụng trên thiết bị di động.

Polyfill được giới thiệu bởi Bernardo Castilho trên bài đăng này .

Đây là bản demo từ bài đăng đó.

Bài đăng cũng trình bày một số cân nhắc về thiết kế folyfill.

Phiên bản beta của Sencha Touch có hỗ trợ kéo và thả.

Bạn có thể tham khảo Ví dụ DnD của họ . Nhân tiện, điều này chỉ hoạt động trên các trình duyệt webkit.

Việc trang bị thêm logic đó vào một trang web có lẽ sẽ khó khăn. Theo tôi hiểu, họ vô hiệu hóa tất cả tính năng xoay trình duyệt và triển khai các sự kiện xoay hoàn toàn bằng javascript, cho phép diễn giải chính xác thao tác kéo và thả.

Cập nhật: liên kết mẫu ban đầu đã chết, nhưng tôi tìm thấy liên kết thay thế này:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Tôi cần tạo tính năng kéo và thả + xoay hoạt động trên máy tính để bàn, thiết bị di động, máy tính bảng bao gồm cả điện thoại windows. Điều cuối cùng làm cho nó phức tạp hơn (sự kiện mspointer so với touch).

Giải pháp đến từ thư viện Greensock tuyệt vời

Phải mất một số lần nhảy qua các vòng để làm cho cùng một đối tượng có thể kéo và xoay được nhưng nó hoạt động hoàn hảo

Bạn cũng có thể thử polyfill kéo-n-drop của Tim Ruffle , chắc chắn tương tự như polyfill của Bernardo Castilho (xem câu trả lời @remdevtec).

Đơn giản chỉ cần làm npm install mobile-drag-drop --save(các phương pháp cài đặt khác có sẵn, ví dụ như với bower)

Sau đó, bất kỳ giao diện phần tử nào dựa vào tính năng phát hiện chạm sẽ hoạt động trên thiết bị di động (ví dụ: chỉ kéo một phần tử, thay vì cuộn + kéo cùng một lúc).

Jquery Touch Punch là tuyệt vời nhưng những gì nó cũng làm là vô hiệu hóa tất cả các điều khiển trên div có thể kéo, vì vậy để tránh điều này, bạn phải thay đổi các dòng ... (tại thời điểm viết bài - dòng 75)

thay đổi

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

đọc

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

thêm bao nhiêu ors tùy thích cho mỗi phần tử bạn muốn 'mở khóa'

Hy vọng điều đó sẽ giúp ai đó

đây là giải pháp của tôi:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Các thư viện Sortable JS là tương thích với màn hình cảm ứng và không cần jQuery.

Cách nó xử lý màn hình cảm ứng, bạn cần phải chạm vào màn hình trong khoảng 1 giây để bắt đầu kéo một mục.

Ngoài ra, họ còn trình bày một thử nghiệm video cho thấy rằng thư viện này đang chạy nhanh hơn JQuery UI Sortable.