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 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://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  
<!-- ThemeSwitcher  |  http://jqueryui.com/docs/Theming/ThemeSwitcher  -->
<style type="text/css">#ui-themeswitcher{position:absolute;top:0.5em;right:130px}</style>
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>jQuery(function($){ $( "<div id='ui-themeswitcher'></div>" ).appendTo( "body" ).themeswitcher(); });</script>
​
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }
</style>
​
</head>
<body>
<br><br><br>
<div class="demo">
 <!-- 
<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
-->
<h2>#sortable</h2>
<ul id="sortable">
  <li id="no_1" class="ui-state-default da">Item 1</li>
  <li id="no_2" class="ui-state-default da">Item 2</li>
  <li id="no_3" class="ui-state-default da">Item 3</li>
  <li id="no_4" class="ui-state-default da">Item 4</li>
  <li id="no_5" class="ui-state-default da">Item 5</li>
</ul>
​
<h2>#draggable</h2>
<ul id="draggable">
  <li id="no_6" class="ui-state-default dr">Item 6</li>
  <li id="no_7" class="ui-state-default dr">Item 7</li>
  <li id="no_8" class="ui-state-default dr">Item 8</li>
  <li id="no_9" class="ui-state-default dr">Item 9</li>
  <li id="no_10" class="ui-state-default dr">Item 10</li>
</ul>
  
</div>
​
</body>
</html>
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers