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>
<meta name="description" content="[Using all DIV's instead of LI's in hopes of fixing IE issues]" />
​
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css"
    rel="stylesheet" type="text/css">
    <link href=
    "http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css"
    rel="stylesheet" type="text/css">
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
    <meta content="[jQuery UI draggable test]" name="description">
    <link href=
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css"
    rel="stylesheet" type="text/css">
    <script src=
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <meta charset="utf-8">
​
    <title>JS Bin</title>
</head>
​
<body>
    <div class="container">
        <div class="row-fluid">
            <h4>Drag elements from "available" box to "selected" box, and sort them as desired</h4>
            Selected elements:
​
            <div id="selectedElements">
                <div class="ui-widget-content">
                  <div class="placeholder">Drag 1 or 2 elements here</div>
                </div>
            </div>
        </div>
​
        <div class="row-fluid">
            Available elements:
​
            <div id="availableElements">
                <div class="ui-widget-content">
                  <div id="exactWord" class="exactWord">Exact Word<br>
                    <input type="text" name="exact"/><br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                  
                  <div id="synonyms">Synonyms<br>
                    <input type="text" name="synonym"/><br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                  
                  <div id="nouns">Common Nouns<br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                  
                  <div id="verbs">Common Verbs<br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                  
                  <div id="adjectives">Common Adjectives<br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                  
                  <div id="adverbs">Common Adverbs<br>
                    <span style="font-size: 75%">This is a
                      description</span></div>
                </div>
            </div><br>
​
            <div style="text-align: center">
                <input id="generateButton" type="button" value="Generate">
            </div>
        </div>
    </div>
</body>
</html>
​
 
#selectedElements div.ui-widget-content {
    text-align: center;
}
​
#selectedElements div.ui-widget-content div, #availableElements div.ui-widget-content div {
    margin: 10px;
}
​
.placeholder {
    opacity:0.3;
    filter:alpha(opacity=30); /* IE */
}
​
.activatedElement {
    transform: scale(0.75, 0.75); /* Firefox and old Opera */
    -webkit-transform: scale(0.75, 0.75); /* Chrome, Safari, and newer Opera */
    -ms-transform: scale(0.75, 0.75); /* IE */
​
    transition: width 1s, height 1s, transform 1s; /* IE, Firefox, and old Opera */
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* Chrome, Safari, and newer Opera*/
  
    opacity:0.4;
    filter:alpha(opacity=40); /* IE */
}
​
Output

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

Dismiss x
public
Bin info
stevedperkinspro
0viewers