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

Date Published: 11/05/2020Published By: JaiSchool

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>

Publish A Comment

Leave a Reply

Your email address will not be published.