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.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
​
        
        
        <style type="text/css">
            .list-container {
                background-color: yellow;
                height: 100px;
                width: 200px;
                border-style:solid;
                border-width:1px;
                overflow: auto;
                
            }
            #dragSource {
                border-style:solid;
                border-width:1px;
                width: 100px;
                background-color: fuchsia;
                text-align: center;
            }
            #dropTargets {
                margin: 0px;
            }
            #dropTargets > li {
                width: 400px;
                list-style-type: none;
            }
         
        </style>
        
        <script type="text/javascript">
          jQuery(function() {
              jQuery('#dragSource').draggable(
                  {
                      revert: true
                  }
              );
              jQuery('#dropTargets > li').droppable(
                  {
                      drop: function( event, ui )
                          {
                              alert("You dropped on " + jQuery(this).html());
                          }
                  }
              );
          });
​
        </script>
​
    </head>
    <body>
        The list below contains droppable items...some of which are NOT visible without scrolling.<br/>
        Drag the fuschia "Drag me" and drop it a visible item.  You should see an alert.<br/>
        Now drop on an invisible item (after the scroll pane). You should NOT see an alert.<br/>
        <div class="list-container">
            <ul id="dropTargets">
                <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>
        </div>
        <br/><br/><br/><br/><br/>
        <div id="dragSource">Drag me
        </div>
    </body>
</html>
​
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers