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 lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Selectable and Sortable</title>
  
<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
​
<style>
​
  ul { width: 300px; min-height: 20px; list-style: none; margin: 0; padding: 0; }
  li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
  li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ddd; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }
​
</style>
​
</head>
<body>
<h2>Layer1</h2>
<ul id="list1" class="connectedSortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<h2>Layer2</h2>
<ul id="list2" class="connectedSortable">
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
<h2>Layer3</h2>
<ul id="list3" class="connectedSortable">
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
​
</body>
</html>
​
 
$( "#list1, #list2, #list3" )
  .sortable({ handle: ".handle",
              connectWith: ".connectedSortable"})
.selectable({
    selecting: function (event, ui) {
                                        if ($(".ui-selected, .ui-selecting").length > 1) {
                                            $(ui.selecting).removeClass("ui-selecting");
                                        }
                                    }
})
    .find( "li" )
      .addClass( "ui-corner-all" )
      .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
NineMasqueradepro
0viewers