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>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h2>Not Working</h2>
  <fieldset id="area1" class="overflow"><legend>Unenrolled Students</legend>
    <o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o>
  </fieldset>
  <fieldset id="area2" class="overflow"><legend>Class A</legend>
    <o></o><o></o>
  </fieldset>
  <fieldset id="area3" class="overflow"><legend>Class B</legend>
    <o></o><o></o>
  </fieldset>
  
  <hr style="clear:both;" />
  <h2>Working</h2>
  <fieldset id="area1" class="noverflow"><legend>Unenrolled Students</legend>
    <o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o><o></o>
  </fieldset>
  <fieldset id="area2"><legend>Class A</legend>
    <o></o><o></o>
  </fieldset>
  <fieldset id="area3"><legend>Class B</legend>
    <o></o><o></o>
  </fieldset>
</body>
</html>
 
.overflow{
  overflow:auto;
}
.noverflow{
  overflow:visible;
}
​
fieldset {
    width:200px; height:400px;
    margin:20px;
    float:left;
  }
  legend {
    background:white;
    border:solid 1px black;
  }
  #area1 {
    background:red;
    
  }
  #area2 {
    height:170px;
    background:green;
  }
  #area3 {
    height:170px;
    background:blue;
  }
  #area4 {
    height:200px;
    background:orange;
  }
  o{
    border-radius:30px;
    display:inline-block;
    margin:2px;
    width:50px; height:50px;
  }
  #area1 o {
    background:pink;
  }
  #area2 o{
    background:limegreen;
  }
  #area3 o{
    background:skyblue;
  }
  #area4 o{
    background:yellow;
  }
 
/*
How to override default jquery behaivor?
​
$.draggable = function(){
  alert('ok');
};
*/
​
    $(document).ready(function(){
      $('o').draggable();
      $('fieldset').droppable();
    });
Output

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

Dismiss x
public
Bin info
prodiklpro
0viewers