JQuery UI Droppable Example

jQuery

Jun 05, 2020

Hi Guys,

In this example,I will learn you how to use jquery ui droppable.you can easy use the jquery ui dropable.

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

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 - NiceSnippets.com</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>

It will help you....