jQuery Drop event not firing

Question

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.

Right now I would just like it to print the "drop". I have several divs with class "folder" and <a>s inside them. I would like to move them around the divs. — Joaquim Ferrer
Is this code wrapped in a $(document).ready(){ }? If not, and this comes before folder is defined, that could be the problem. — LAROmega

Nick Bull Nick Bull · Accepted Answer · 2016-08-05T19:39:20

You need to use event.stopPropagation():

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

jQuery Drop event not firing

1 Answers