`drop` olayından sonra yönlendirme nasıl durdurulur?

Question

Bir dosyayı Firefox'ta div'a bıraktıktan sonra, web sayfası bu dosyaya yeniden yönlendirilecektir. Jquery'nin e.preventDefault()'u drop işleyicisinde kullanarak bu yayılımı durdurmaya çalıştım ve başarısız oldu.

#test dosyasına bir dosya atılırsa, this demo adresine bakın, web sayfasını yeniden yönlendirmeyecek, ancak #test1 içine düşecek, nedenini öğrenmek istiyorum. drop'dan sonra yayılımı önlemek için her zaman işleyicileri dragenter, dragover, dragleave ve drop'a bağlamalı mıyım?

güncelleme:

Ben html5doctor ilgili bazı ipuçları bulundu:

bu elemanda bırakabilirsiniz tarayıcı söylemek gerekirse, yapmamız gereken tüm dragover olayı iptal olduğunu. Ancak, IE farklı davrandığından dolayı, , dragenter olayı için aynı şeyi yapmamız gerekiyor.

Ve Mozilla claims: için kullanılır dragenter ve dragover olaylar için

bir dinleyici, yani öğeleri sürüklenen yerleri bırakılabilir geçerli damla hedefleri gösterir.

Ama firefox this demo test #test çalışır ve #test1 değil, Mozilla bir hata yapmış görünüyor ve html5doctor haklı: Yalnızca Firefox drop çalışması için dragover gerekiyor.

Answer 1

ondragover olay ondrop olay ateş izin vermek Google Chrome ve Safari iptal edilmesi gerekmektedir.

Answer 2

Sadece onDragOver'ı iptal etmek için yeterli olmadığını farkettim, ancak aynı zamanda onDragDrop ve onDragLeave'yi iptal etmek zorunda kaldım. Aşağıda, kullanıcının yaptıklarını davranış gösteren günlüğünü gösteriyorum: o zaman

<script type="text/javascript"> 

    var handledragleave = function handleDragLeave(e) { 
      console.log("Floating away. Do code here when float away happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragdrop = function handleDrop(e) { 
      console.log("Dropping. Do code here when drop happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragover = function handleDragOver(e) { 
      console.log("Floating over. Do code here when float over happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    cancelDefaultBehavior(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 
    } 

$('.your-element-being-dragged-to') 
    .on('DragLeave', handledragleave) 
    .on('DragDrop', handledragdrop) 
    .on('DragOver', handledragover); 

</script> 

Ve elemanı ...

<p class="your-element-being-dragged-to">Drag something here!</p>