Jquery droppable

by dirtyd77

HTML

<div id="container">
    
<div id="draggable"> 
    <p>Drag me to my target</p> 
</div> 
 
<div id="droppable"> 
    <p>Drop here</p> 
</div>

CSS

#container {
    background: #DDD;
    height: 260px;
    position: relative;
}

#draggable { 
    background: #78BA91;
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
}

#droppable { 
    background: #6B7B95;
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
}

JavaScript

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .find( "p" )
                        .html( "Dropped!" );
                console.log(ui);
            }
        });
    });