Drag and Drop functionality using jQuery-ui

1. Need to load jQuery and jQuery-ui library

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

2. Now you need to initialize drag and drop features

  <script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $("ul.sortable").sortable({opacity: 0.6, cursor: 'move', update: function() {},
                receive: function(e, ui) {
                     var Id = ui.sender.attr('id');                                         
                }
            });
        });

        $('ul.dragable li').live('mouseover', function() {
            $(this).draggable({
                revert: false,
                cursor: 'move',
                helper: 'clone',
                opacity: 0.75,
                connectToSortable: 'ul.sortable'
            });
        });
    });
  </script>

3. Now Inject drag and drop functionality to a list order

    <ul class="dragable">            
	<li>Drag This first content and drop to sortable list</li>
	<li>Drag This second content and drop to sortable list</li>
	<li>Drag This Third content and drop to sortable list</li>
   </ul>
   <ul class="sortable">  
	<li>Sortable list first item</li>
	<li>Sortable list second item</li>
	<li>Sortable list Third item</li>
   </ul>