Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script> 
 <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" /> 
<style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  
</head>
<body>
  <div class="demo">
​
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
​
</div><!-- End demo -->
​
<div class="demo-description" style="display: none; ">
​
<p>
  Enable a group of DOM elements to be sortable. Click on and drag an
  element to a new spot within the list, and the other items will adjust to
  fit. By default, sortable items share <code>draggable</code> properties.
</p>
​
</div>
</body>
</html>
 
$(function() {
    
    $("#sortable").sortable({
       start: function(event, ui) { console.log('before @ '+ ui.item.index()); },
       update: function(event, ui) { console.log('now @ '+ ui.item.index()); }
    });
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers