Joaquim Ferrer Joaquim Ferrer - 4 months ago 24
HTML Question

jQuery Drop event not firing

I'm trying to move links (.link) from one div (.folder) to another but the drop event is not firing. I think I made all .link divs droppable areas by preventing default behaviour in dragenter and dragover events. Here's the code:

$(document).ready(function() {
//Logic for create folder button
$("#create-folder-button").click(createFolder);

// //Logic for drag and drop for the links
$(".folder").on("dragstart", function(e) {
console.log("dragstart");
});
$(".folder").on("dragenter dragover", function(e) {
e.preventDefault();
});
$(".folder").on("drop", function(e) {
e.preventDefault();
console.log("drop");
});
});


The "dragstart" prints but the "drop" doesnt.

Answer

You need to have e.stopPropogation():

$(".folder").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});