title: drag and drop using javascript and jquery
body: <p>I am trying to capture the coordinates of list items on their current position and also after they have been dragged and dropped to some place.
  I am able to capture the cooedinates before thr drag and drop. I am not able figure out what to do after the drag and drop. please help.</p>
  
  <p>the html:</p>
  
  <pre><code>&lt;ul class="sortable"&gt;
  &lt;li class="ui-state-default" id="third"&gt;3&lt;/li&gt;
              &lt;li class="ui-state-default" id="fourth"&gt;4&lt;/li&gt;
              &lt;li class="ui-state-default" id="fifth"&gt;5&lt;/li&gt;
              &lt;li class="ui-state-default" id="sixth"&gt;6&lt;/li&gt;
              &lt;li class="ui-state-default" id="seventh"&gt;7&lt;/li&gt;
              &lt;li class="ui-state-default" id="eighth"&gt;8&lt;/li&gt;
              &lt;li class="ui-state-default" id="ninth"&gt;9&lt;/li&gt;
              &lt;li class="ui-state-default" id="tenth"&gt;10&lt;/li&gt;
              &lt;li class="ui-state-default" id="eleventh"&gt;11&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the jquery:</p>
  
  <pre><code>$(function () {
      $(".sortable").sortable();
      $(".sortable").disableSelection();
      //---------------------------------------------------------------------------------------------------------------------------//
      //rounded-corner || ui-state-default
      $('.rounded-corner').on('click', function(){
      var offset = $(this).offset();
      alert('top - ' + offset.top + "\nleft - " + offset.left);});
      //ONCLICK CLOSE
      /*$(".ui-state-default").click(function () {
          var tblId = $(this).attr("id");
         // alert(tblId);
         var ans = confirm("Are you sure you want to remove this table?");
         if(ans == true)
          $("#" + tblId).hide();
          //else exit();
      });*/
      //---------------------------------------------------------------------------------------------------------------------------//
  
      $(".glyphicon-remove").click(function () {
          var tblId = $(this).parent().attr("id");
         // alert(tblId);
         var ans = confirm("Are you sure you want to remove this table?");
          if(ans)
              $("#" + tblId).hide(500);
          //else exit();
      });
  
      $(document).bind("contextmenu", function(e) {
          var tblId,tbl, ans;
          tblId = $(this).parent().attr("id");
          tbl = $("#" + tblId);
          if (!(tbl.is(":visible"))) {
              // It's not showing
              ans = confirm("Are you sure you want to show this table?");
          }
          if(ans){
              $('.glyphicon-remove').parent().show(500);
          }
      return false;
      });
  
      }); 
  </code></pre>