Sortable JQuery Fiddle

Sortable JQuery Fiddle

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<div id="log"></div>

CSS

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
 li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$(function() {
        $( "#sortable" ).sortable({
          revert: true,
          stop: function(evt, ui) {
              myFunction();
          }
        });
    });
    
    function myFunction()
    {
        $('li').each(function()
        {
            $(this).off();              // delete any previously defined function
            $(this).click(function()    // define a new function
            {
                alert('My position is: '+$("li").index( $(this) ));
            });
        });
    }