Error Event Preventing Default

Question

I have the following: http://jsfiddle.net/KywJT/

function dragEnter(evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).addClass('over'); } function dragLeave(evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).removeClass('over'); } function drop(evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).removeClass('over'); } jQuery( function ( $ ) { var $box = $( "#box" ); $box.bind("dragenter", dragEnter); $box.bind("dragleave", dragLeave); $box.bind("drop", drop); }); 

I am using Chrome version 24.0.1312.52 m and the latest jQuery (1.8.3). When I drop the file into the window, the browser does not prevent the use of default beaviour. Can you help me?

PS dragexit is deprecated correctly?

Answer 1

This should solve the problem for you.

 jQuery( function ( $ ) { var $box = $( "#box" ); $box.bind("dragenter", dragEnter); $box.bind("dragleave", dragLeave); $box.bind("drop", drop); $(document).bind('dragover', function (e) { e.preventDefault(); }); }); 

Answer 2

If you want the calendar event to be fired in Google Chrome, a dragover listener must be defined in front of it, even if the function does nothing. I don’t know why, this is strange ... but clearly identified and easy to reproduce :) Lost 2 hours on this last night: / hope this helps

Answer 3

This is an old question, but I used the answers to this question and wrote the code I want:

HTML:

 <div id="image_holder" ondragover="dragEnter(this,event)"></div> 

JQuery

 function dragEnter(a,evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).addClass('over'); $(a).bind("dragleave", dragLeave); $(a).bind("drop", drop); $(document).bind('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); return false; } function dragLeave(evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).removeClass('over'); return false; } function drop(evt) { evt.stopPropagation(); evt.preventDefault(); $(evt.target).removeClass('over'); } 

This has a privilege that you can easily use for different elements on the page.