Phát hiện tính năng cho setDragImage của HTML5 Kéo và thả

Question

Có cách nào để phát hiện tính năng cho setDragImage Kéo và thả HTML5 (bằng JavaScript hoặc Dart) không?

tôi làm Kéo HTML5 nói chung và Drop phát hiện tính năng như sau (từ guide to detecting everything):

return 'draggable' in document.createElement('span'); 

này sẽ trở lại true dành cho Chrome, Firefox, vv, và IE10. Nó sẽ trả lại false cho IE9.

Bây giờ, vấn đề là với IE10: Trong khi nó hỗ trợ hầu hết HTML5 Drag and Drop, setDragImage không được hỗ trợ và tôi cần phải cung cấp một polyfill chỉ cho setDragImage. Nhưng tôi không thể tìm ra cách để phát hiện ra điều này.

Answer 1

Tính năng phát hiện tính năng được đề cập trong câu trả lời trước thất bại trong Opera 12 - vì nó xác nhận hỗ trợ cho setDragImage, nó không hoạt động. Các thư viện Dart đã được liên kết với cũng thất bại hoàn toàn trong Opera 12, ném nhiều lỗi cho giao diện điều khiển. Nó thực sự không thể thực hiện một hình ảnh ma - ngay cả khi bạn tạo một phần tử tài liệu và định vị nó ở đúng nơi, bạn không thể loại bỏ phần mặc định mà không có setDragImage. Giải pháp duy nhất tôi biết là lọc ra Opera 12 và tất cả các phiên bản của IE (lên đến và bao gồm IE11) và coi chúng là các trình duyệt kế thừa, mà phải được phục vụ cho kịch bản sự kiện chuột truyền thống. Kể từ khi thử nghiệm tính năng trực tiếp thất bại, tôi muốn giới thiệu một bài kiểm tra đối tượng gián tiếp (tức là sử dụng một thử nghiệm đối tượng để phát hiện những trình duyệt cụ thể):

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));

Answer 2

giải pháp này giả định chung D hỗ trợ D & đã được kiểm tra.

Javascript (thử nghiệm trong IE, Firefox, Opera và Chrome):

function test() { 
    var testVar = window.DataTransfer || window.Clipboard; // Clipboard is for Chrome 
    if("setDragImage" in testVar.prototype) { 
     window.alert("supported"); 
    } else { 
     window.alert("not supported"); 
    } 
} 

Dart:

tôi không tìm thấy một cách để làm điều này với "mẹ đẻ" Dart mã, do đó js-interop là con đường để đi.

Answer 3

Bạn có thể sử dụng setDragImage-IE polyfill:

https://github.com/MihaiValentin/setDragImage-IE

Đây là cách nó thực sự hoạt động (từ README):

tôi nhận thấy rằng nếu bạn thực hiện một sự thay đổi kiểu của phần tử (thêm một lớp thay đổi hình thức) trong sự kiện dragstart và sau đó xóa nó ngay lập tức trong setTimeout, Internet Explorer sẽ tạo bản sao bitmap của phần tử đã sửa đổi và sẽ sử dụng nó để kéo. Vì vậy, thư viện này thực sự làm gì là triển khai phương pháp setDragImage thay đổi kiểu phần tử của mục tiêu bằng cách thêm một lớp mà bao gồm hình ảnh bạn muốn xuất hiện trong khi kéo và sau đó xóa .Bằng cách này, trình duyệt hiển thị kiểu tạm thời là phần tử làm hình ảnh kéo.