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>

Advertisements

Quick and easy sortable list 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 sorting flavour


  <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(function() {
            jQuery(".sortable").sortable({opacity: 0.6, cursor: 'move', update: function() { }});
        });
    });
  </script>

3. Now this is the time to play on sorting list, Inject sorting functionality to a list order


  <ul class="sortable">
        <li>This is first li</li>
	<li>This is second li</li>
	<li>This is third li</li>
  </ul>

Thats it. DONE