Hiệu ứng Kéo và Thả HTML5Cho phép và thảEffect

Question

Mối quan hệ giữa hai thuộc tính này dường như là nguồn gây nhầm lẫn. Dựa trên đọc cả the MDN site và MSDN Tôi nghĩ rằng tôi đã tìm ra, nhưng bây giờ tôi không chắc chắn ....

Tôi nhận thấy rằng khi một yếu tố được kéo, bạn có thể xác định những gì được phép xảy ra với nó (tức là nó có thể được di chuyển, sao chép, liên kết đến - một trong các hằng số effectAllowed). Đây là thuộc tính effectAllowed.

Mục tiêu thả khác nhau thực hiện những việc khác nhau, vì vậy khi bạn kéo một phần tử khác, nó có thể kiểm soát "hiệu ứng" nào xảy ra khi thả, đây là thuộc tính "dropEffect". Vì vậy, tôi thiết lập một ví dụ đơn giản để kiểm tra lý thuyết này.

JSFiddle

$("[draggable='true']").on("dragstart", function(e) { 
    var dt = e.originalEvent.dataTransfer; 
    dt.effectAllowed = "copyMove"; 
    dt.setData("text/plain", "Foo"); 
}); 

$("#dropZoneCopy").on("dragover", function(e) { 
    var dt = e.originalEvent.dataTransfer; 
    dt.dropEffect = "copy"; 
    e.preventDefault(); 
}); 

$("#dropZoneMove").on("dragover", function(e) { 
    var dt = e.originalEvent.dataTransfer; 
    dt.dropEffect = "move"; 
    e.preventDefault(); 
}); 

Tôi có một hộp người dùng có thể kéo - những tác động cho phép là "copyMove". Tôi có một hộp đặt dropEffect để sao chép, và một khi thiết lập dropEffect để di chuyển. Những gì tôi mong đợi là khi người dùng kéo qua "hộp sao chép" con trỏ sẽ thay đổi để cho biết một bản sao sẽ xảy ra, khi tôi kéo qua "di chuyển hộp" con trỏ thay đổi để cho biết một ...

Only Chrome hoạt động như tôi mong đợi. Đây có phải là vì trình duyệt khác không đúng hoặc vì tôi không hiểu thông số. đúng không?

CẬP NHẬT Một số thông tin khác không quan trọng với điều này.

Trong cả Firefox và Chrome, nếu bạn có một nguồn kéo cho biết effectAllowed là "copy" và dropzone cho biết dropEffect là "di chuyển" thì bạn không thể thả vùng thả ngay cả khi bạn hủy sự kiện. Tôi nghĩ rằng dropEffect sẽ hữu ích khi đọc ondrop để xem phải làm gì, nhưng nó không có sẵn trên Chrome, dropEffect không xuất hiện trên trình xử lý thả xuống, ví dụ: cố gắng đọc dataTransfer.dropEffect sẽ nói rằng dropEffect là "none" mặc dù bạn đặt nó trên dragover. Thiết lập dropEffect như đã nói ở trên không ảnh hưởng đến cách con trỏ được hiển thị.

Trên Firefox, dropEffect không đi qua trên vùng thả xuống sau khi được đặt trên kéo, nhưng nó không ảnh hưởng đến hiển thị con trỏ chuột. Trên cửa sổ Firefox, nhấn phím ctrl sẽ ảnh hưởng đến màn hình của chuột, nhưng không ảnh hưởng đến thuộc tính dropEffect.

Thông số cho thấy nguồn có thể nghe sự kiện kéo để xem điều gì đã xảy ra. Nó sẽ xem xét dropEffect trong sự kiện này. Chrome, Mozilla và Safari hoạt động như bạn mong đợi ở đây, hiệu ứng thả sẽ xuất hiện trong sự kiện kéo. Trong IE nếu hiệu ứng được phép là một giá trị đơn giản, ví dụ: "sao chép" sau đó bất kỳ kết quả thả nào thành công trong giá trị này xuất hiện dưới dạng dropEffect khi kéo. Nếu effectAllowed là một giá trị phức hợp như copyMove và bạn đã cố gắng chọn "di chuyển" khi di chuyển bằng cách thiết lập dropEffect, bạn không may mắn, nó sẽ đi qua như dropEffect = "none" ở nguồn trên dragend. Bạn đang mắc kẹt với một con trỏ & một dropEffect và đó là effectAllowowed được đặt trên dragstart nếu hiệu ứng đó là một giá trị đơn giản. Điều thú vị là dropEffect nó dường như đi qua khi bạn kéo vào một ứng dụng gốc từ IE11 ít nhất (và tôi giả định trước đó).

ghi chú khác

Mở Safari trên mac - effectAllowed không thể được đặt programatically, do đó bất kỳ dropEffect đó được thiết lập là hợp lệ. Khi bạn nhấn phím cmd effectAllowed trở thành "di chuyển" và khi bạn nhấn phím alt, effectAllowed sẽ trở thành "copy".Sau đó nó hoạt động như bạn mong đợi, nếu dropEffect không phải là một trong những hiệu ứng này Cho phép thả không được trình duyệt cho phép.

Thông tin thêm Tôi đã dành thời gian rảnh để làm việc trên thư viện kéo và thả HTML5, tôi đã viết nhiều hơn về vấn đề này và các vấn đề khác trong tài liệu, nếu bạn quan tâm tại the project

Answer 1

Tôi đã kiểm tra url và tôi có cùng phản hồi trong chrome và IE 10, tức là con trỏ hiển thị dấu sao chép trong khi kéo nhưng không sao chép/di chuyển hình chữ nhật. Bạn có thể nhận trợ giúp từ http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

Answer 2

Tôi biết đây không thực sự là câu trả lời hay nhất nhưng bạn có thể sử dụng khung giao diện người dùng như giao diện người dùng JQUERY đã kéo/thả đã được tích hợp sẵn với một loạt các tính năng. Có lẽ nhịp đập xây dựng lại tính năng này.