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>Draggable with Multiple Sortables</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://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
  <script src="http://localhost:8888/jquery-ui/ui/draggable.js"></script>
​
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px; }
.demo li { margin: 0px; padding: 5px; width: 150px; }
</style>
​
</head>
<body>
​
<div class="demo">
  
<ul>
  <li class="draggable ui-state-highlight">Drag me down</li>
</ul>
​
<h2>#sortable1</h2>
<ul class="sortable">
  <li class="ui-state-default draggable">Item 1</li>
  <li class="ui-state-default draggable">Item 2</li>
​
  <li class="ui-state-default draggable">Item 3</li>
  <li class="ui-state-default draggable">Item 4</li>
  <li class="ui-state-default draggable">Item 5</li>
</ul>
  <h2>#sortable2</h2>
  <ul class="sortable">
  <li class="ui-state-default draggable">Item 1</li>
  <li class="ui-state-default draggable">Item 2</li>
​
  <li class="ui-state-default draggable">Item 3</li>
  <li class="ui-state-default draggable">Item 4</li>
  <li class="ui-state-default draggable">Item 5</li>
</ul>
<br><br><br><br>
​
​
</div>
​
</body>
</html>
​
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