I've the following: /

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'm using Chrome version 24.0.1312.52 m and last jQuery (1.8.3). When I drop a file into the box, browser is not preventing default beaviour. Can you please help me?

P.S. dragexit is deprecated correct?

I've 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'm using Chrome version 24.0.1312.52 m and last jQuery (1.8.3). When I drop a file into the box, browser is not preventing default beaviour. Can you please help me?

P.S. dragexit is deprecated correct?

• javascript
• jquery
• google-chrome
• drag-and-drop
• jquery-events

• 1 It works for me and I didn't modify a single line of code – Alexander Commented Jan 14, 2013 at 20:05
• 2 Oo.. It was just working until I updated Chrome :| Version 24.0.1312.52 m now it just opens the file in the browser – wirey00 Commented Jan 14, 2013 at 20:09
• K, I'm not crazy. Any fix? – user1824269 Commented Jan 14, 2013 at 20:14
• @user1824269 I'm not sure.. still playing around with it. It was just working, was going to paste my Chrome browser version.. But it said I need to restart browser to update.. Once I restarted it didn't work anymore.. – wirey00 Commented Jan 14, 2013 at 20:18

3 Answers 3

If you want the drop event to be fired in Google Chrome, a dragover listener has to be defined before, even if the function doesn't do anything at all. I don't know why, it's weird... but clearly identified and easy to reproduce :) Lost 2 hours on that sh*t yesterday :/ hope this helps

This should fix the issue 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();
    });
});

This is an old question but I used 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 the privilege you can use it easily for different elements in page.