Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <link class="jsbin" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="http://jqueryui.com/demos/demos.css" rel="stylesheet" type="text/css" />
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
    
  <style>
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  </style>
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
    #status { max-height:100px; overflow:auto; width:200px; }
  </style>
  <script type="text/javascript">
    %code%
  </script>
</head>
<body>
  <div class="demo">
    <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>
      <li class="ui-state-default">Item 6</li>
      <li class="ui-state-default">Item 7</li>
    </ul>
    
    </div><!-- End demo -->
    
    <div class="demo-description">
    
    <p>
      When dragging a sortable item to a new location, other items will make room
      for the that item by shifting to allow white space between them. Pass a
      class into the <code>placeholder</code> option to style that space to
      be visible.  Use the boolean <code>forcePlaceholderSize</code> option
      to set dimensions on the placeholder.
    </p>
    
  </div><!-- End demo-description -->
</body>
</html>
 
  $(function() {
    $("#sortable").sortable({
      placeholder: 'ui-state-highlight',
      start: function (e,ui){
        $(ui.placeholder).slideUp();
      },
      change: function (e,ui){
        $(ui.placeholder).hide().slideDown();
      }
    });
    $("#sortable").disableSelection();
  });
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