In this tutorial, we will learn JQuery UI Droppable Example


You will know how to use jquery UI droppable. You can easily use the jquery UI dropable.

This can be done by clicking on the draggable object by mouse and dragging it anywhere within the viewport.


Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JQuery UI Droppable Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #draggabled { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border:2px solid #008B8B;}
        #droppabled { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border:2px solid #008B8B;}
        .ui-state-highlight{
            background:#008B8B;
            color:#fff;
        }
    </style>
</head>
<body>
    <h2>JQuery UI Droppable Example - rathorji.in</h2>
    <div id="draggabled" class="ui-widget-content">
        <p>Drag Me To My Target</p>
    </div>
 
    <div id="droppabled" class="ui-widget-header">
        <p>Drop Here</p>
    </div>

    <script>
        $(function() {
            $("#draggabled").draggable();
            $("#droppabled").droppable({
                drop: function(event,ui){
                    $(this)
                        .addClass("ui-state-highlight")
                        .find( "p" )
                        .html("Dropped!");
                    }
            });
        });
    </script>
</body>
</html>

May this example help you.