dropEffect không hoạt động khi kéo tệp vào Firefox

Tôi có một trang web cho phép các tệp được kéo từ bên ngoài trình duyệt và rơi vào một mục tiêu trên trang web của tôi. Ứng dụng của tôi sẽ tải lên một bản sao của mỗi tệp, vì vậy tôi đặt dataTransfer.dropEffect thành "sao chép" để trình duyệt sẽ chỉ ra cho người dùng rằng điều này sẽ dẫn đến một bản sao thay vì di chuyển. Điều này hoạt động như mong đợi trong Chrome: khi kéo tệp qua mục tiêu thả của tôi, trình duyệt sẽ hiển thị con trỏ "sao chép". Nhưng Firefox dường như bỏ qua dropEffect và tiếp tục hiển thị con trỏ "di chuyển" mặc định của nó trong khi các tệp đang được kéo trên mục tiêu thả của tôi. Tôi đã thực hiện rất nhiều tìm kiếm và không tìm thấy bất kỳ đề cập đến một vấn đề Firefox như thế này, vì vậy tôi có lẽ nhìn một số chi tiết trong mã của tôi. Tôi đã bao gồm một ví dụ được rút gọn minh họa vấn đề bên dưới. Cảm ơn trước nếu bất cứ ai có thể phát hiện ra những gì tôi đang làm sai.dropEffect không hoạt động khi kéo tệp vào Firefox

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Stuff</title> 

<style type="text/css"> 
P 
{ 
background-color: #cccccc; 
padding: 10px; 
} 

</style> 
<script type="text/javascript"> 

function DocOnLoad() { 
var target = document.getElementById('dropTarget'); 
target.addEventListener('dragenter', function (e) { 
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'copy'; 
}); 
target.addEventListener('dragover', function (e) { 
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'copy'; 
}); 
target.addEventListener('drop', function (e) { 
    e.preventDefault(); 
    var files = e.dataTransfer.files; 
    alert(files[0].name); 
}); 
} 



</script> 

</head> 

<body onLoad="DocOnLoad()" > 

<p id="dropTarget">Drop target.</p> 

</body> 
</html>

Nguồn

2012-02-16 BradVoy

Tôi có cùng một vấn đề. Quan sát của tôi là Chrome và Safari trên Windows tôn trọng dropEffect, nhưng Firefox 13, Opera 11.64 và Internet Explorer 9 & 10 thì không. :( – thomthom

Nó trông giống một lỗi mozilla hơn là thứ khác.

Tôi đã thử một vài thử nghiệm và luôn có kết quả tương tự.

Giữ một mắt đây để theo dõi các BUG: dataTransfer.dropEffect

Good Luck!

EDIT: Đây là mozilla dev. liên kết trong DOCS: DataTransfer#dropEffect

Hãy xem với "mozCursor" phần ...

Nguồn

2012-08-20 06:37:18 gmo

mozCursor là một bước đi đúng hướng, nhưng nó quá xấu Firefox không hoạt động giống như các trình duyệt khác. – BradVoy

Firefox cho thấy "bản sao" con trỏ nếu người dùng giữ phím Ctrl trong khi kéo theo mặc định.

Cách duy nhất xung quanh việc này là đặt dataTransfer.effectAllowed trên trình thu thập dữ liệu cũng như dataTransfer.dropEffect thành "sao chép".

Ví dụ:

<html> 
 
<head> 
 
<style> 
 
    #div1 { width:300px;height:70px;padding:10px;border:1px solid black; } 
 
</style> 
 
<script> 
 
    function dragOver(e) { 
 
    e.dataTransfer.dropEffect = "copy"; 
 
    e.preventDefault(); 
 
    } 
 
    function dragStart(e) { 
 
    e.dataTransfer.effectAllowed = "copy"; 
 
    e.dataTransfer.setData("text", e.target.id); 
 
    } 
 
</script> 
 
</head> 
 
<body> 
 
    <div id="div1" ondragover="dragOver(event)"></div> 
 
    <br> 
 
    <h1 id="drag1" draggable="true" ondragstart="dragStart(event)">DRAG ME</h1> 
 
</body> 
 
</html>

Nguồn

2015-06-30 08:05:19

dropEffect không hoạt động khi kéo tệp vào Firefox

Trả lời

Các vấn đề liên quan