Question

I would like to handle the Drag & Drop HTML 5 feature with jQuery. It’s OK till the drop event which isn’t fired. Look at my code :

<div id="columns">
  <div class="column" draggable="true"><header>A</header></div>
  <div class="column" draggable="true"><header>B</header></div>
  <div class="column" draggable="true"><header>C</header></div>
</div>

$('#columns .column').on({
    dragstart: function() {
        $(this).css('opacity', '0.5');
    },
    dragleave: function() {
        $(this).removeClass('over');
    },
    dragenter: function() {
        $(this).addClass('over');
    },
    dragend: function() {
        $(this).css('opacity', '1');
    },
    drop: function() {
       alert('drop');
    }
});

My alert isn’t fired but dragend is. What’s the difference between dragend and drop?

I found something about jQuery and drop event which is jQuery.event.props.push('dataTransfer');

I’m stuck now, I made a fiddle, someone could help me to finalize my test?
http://jsfiddle.net/sylouuu/bNQeJ/3/

Answer 1

Check this one out: http://jsfiddle.net/bNQeJ/4/

According to this you need to call event.preventDefault on the last dragenter or dragover event to create a valid drop target.