$(selector).on(“drop”,callback) | ondrop event in Jquery

First, you need to disable the browser’s default functionality of dropping. For example, when you drop an image in the browser window, the browser displays it. To prevent it use preventDefault() method.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery on drop event</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center">Drop any Image.</h1>

<script>
 $(document).ready(function(){
    $(document).on("dragover",function(e){
    e.preventDefault();
 });

    $(document).on("drop",function(e){
        e.preventDefault();
        console.log(e);
        alert(e.originalEvent.dataTransfer.files[0].name);
    });
});
</script>
</body>
</html>

Leave a Comment