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
  • …
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Drag and Drop Testing - Invisible Droppables</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
​
        
        <script type="text/javascript">
          jQuery(function() {
              jQuery('.sortable').sortable(
                  {
                    connectWith: ".sortable"
                  }
              );
       
          });
​
        </script>
​
    </head>
    <body>
      The lists below are nested sortables<br/>
      Down to up  drag works <br/>
      Up to down drag don't (or very bad) <br/>
      
      <br/>
     
            <ul class="sortable">
                <li>Cat</li>
                <li>Dog</li>
                <li>Pony</li>
                <li>Horse</li>
                <li>Pig</li>
                <li>
                 
            <ul class="sortable">
                <li>Cat</li>
                <li>Dog</li>
                <li>Pony</li>
                <li>Horse</li>
                <li>Pig</li>
                <li>Giraffe</li>
                <li>Tiger</li>
                <li>Monkey</li>
            </ul>
      
              </li>
                <li>Tiger</li>
                <li>Monkey</li>
            </ul>
 
​
    </body>
</html>
​
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers