Почему страница перенаправляется, когда я перетаскиваю изображение на div

Question

Я использую jquery 1.9, У меня есть проблема, чтобы реализовать загрузку изображения с помощью перетаскивания, но когда я перетаскиваю изображение в div, тогда оно собирается перенаправить и открыть изображение в браузере. Я реализую код в jsfiddle, пожалуйста, проверьте и скажите мне, в чем проблема, почему его перенаправляют

это мой следующий код

$(document).on('ready',function(){
    jQuery.event.props.push('dataTransfer');
    $('.dropuploader').bind('drop', function(e){
        $(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
        alert("hello there");
        return false;
    });
    $('.dropuploader').bind('dragenter', function(e){
        $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
        return false;
    });

});

Answer 1

Ты пропустил ondragover="return false" используйте следующий div html

<div class="dropuploader" ondragover="return false">Upload here</div>>

вместо

<div class="dropuploader">Upload here</div>

Answer 2

Вам также нужно добавить событие dragover, чтобы оно заработало.

Например:

$('.dropuploader').on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

Смотрите это jsfiddle: http://jsfiddle.net/jwa3q/

Дополнительную информацию о событиях перетаскивания можно найти здесь: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations