[Solved] I want to create a div that can dragged inside the parent div and dropped?

Question

You could user Jquery-UI Droppable component.

Sample code:

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

and:

$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});

Edit:
You need to add the jQuery and jQuery-UI libraries:

<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>

Please note that this example was taken from the jQuery UI web site.

Edit:
See this fiddle example.

Basically you need to add your logic in the drop event. This is just a simple example that does really nothing but change the background color of the drop zone.

Accepted Answer