Перетащите изображение с компьютера на div?

Question

window.addEventListener("dragover",function(e){e.preventDefault();},false); 
window.addEventListener("drop",function(e){e.preventDefault();},false); 

$('#cover-drop-zone').ondrop = function(e) { 
    alert('drop'); 
    return false; 
}; 

У меня выше JS.

Вот мой HTML.

<div id="cover-drop-zone" class="image-drop-zone"><i class="icon-plus"></i></div> 

Когда я перетащить изображение с моего компьютера к окну браузера, и через # Сокрытие раскрывающихся зоны ничего не происходит.

Если я изменяю цель ondrop на окно, он работает.

Но я не хочу, чтобы пользователь мог перетаскивать изображение в любом месте окна.

Куда я иду не так?

Answer 1

Некоторые метод кросс-браузер существует:

<div class="drop_panel"> 
    drop here 
    <input class="hidden_input" type="file" > 
</div> 

и CSS:

.drop_panel { 
    padding: 50px; 
    position: relative; 
} 
.hidden_input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    opacity: 0; 
} 

если файл упал пожары .hidden_input OnChange событие

Answer 2

Это от MSDN: http://msdn.microsoft.com/en-us/library/ie/ms536929(v=vs.85).aspx

Вы должны canc el действие по умолчанию для ondragenter и ondragover для того, чтобы выстрелить ondrop. В случае с div значение по умолчанию не должно падать. Это может быть противопоставлено случаю текстового элемента ввода , в котором действие по умолчанию должно быть уменьшено. В порядке , чтобы разрешить действие перетаскивания на div, вы должны отменить действие по умолчанию , указав window.event.returnValue=false как в обработчиках событий , так и ondragover. Только тогда будет ondrop пожара.

Но, я узнал, что вам нужно просто отменить ondragover вместо того и другого.

Смотрите скрипку: http://jsfiddle.net/4B8tE/3/