Sự kiện thả không kích hoạt trong chrome

Có vẻ như sự kiện giảm không kích hoạt khi tôi mong đợi.

Tôi giả sử rằng sự kiện thả sẽ kích hoạt khi một phần tử đang được kéo được giải phóng phía trên phần tử đích, nhưng điều này dường như không đúng với trường hợp này.

Tôi đang hiểu sai điều gì?

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

Để sự kiện drop xảy ra trên phần tử div, bạn phải hủy sự kiện ondragenterand ondragover. Sử dụng jquery và mã của bạn được cung cấp ...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

Để biết thêm thông tin, hãy xem trang MDN .

Bạn có thể nhận được ngay với chỉ làm một event.preventDefault()trên dragoversự kiện. Làm điều này sẽ kích hoạt dropsự kiện.

Để sự kiện rơi kích hoạt, bạn cần phải chỉ định dropEffect trong sự kiện qua, nếu không sự kiện ondrop sẽ không bao giờ được kích hoạt:

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

Đây không phải là một câu trả lời thực tế nhưng đối với một số người như tôi, những người thiếu kỷ luật về tính nhất quán. Drop không kích hoạt đối với tôi trong chrome khi đó effectAllowedkhông phải là hiệu ứng mà tôi đã thiết lập dropEffect. Tuy nhiên, nó đã hoạt động đối với tôi trong Safari. Điều này sẽ được thiết lập như sau:

ev.dataTransfer.effectAllowed = 'move';

Ngoài ra, effectAllowedcó thể được đặt là all, nhưng tôi muốn giữ tính cụ thể ở những nơi tôi có thể.

đối với trường hợp khi hiệu ứng thả được di chuyển:

ev.dataTransfer.dropEffect = 'move';