A Pen by Jordan White on CodePen.
Created
November 12, 2017 20:28
-
-
Save anonymous/d57bf91b182b033a1df2b84baa3ca059 to your computer and use it in GitHub Desktop.
Drag and Drop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <link rel="stylesheet" href="/resources/demos/style.css"> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="left"> | |
| <h3>ICU 1</h3> | |
| <ul id="sortable1" class="droptrue"> | |
| RN (1) | |
| </ul> | |
| <div> | |
| <h3>ICU 2</h3> | |
| <ul id="sortable2" class="dropfalse"> | |
| NA (1) | |
| </ul> | |
| <ul id="sortable2" class="dropfalse"> | |
| Sitter (1) | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>ICU 3</h3> | |
| <ul id="sortable2" class="droptrue"> | |
| RN (1) | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>ICU 4</h3> | |
| <ul id="sortable2" class="droptrue"> | |
| RN (1) | |
| </ul> | |
| </div> | |
| </div> <!-- Left --> | |
| <div class="right"> | |
| Available RNs | |
| <ul id="sortable1" class="droptrue"> | |
| <li class="ui-state-default">Zachary Smith</li> | |
| <li class="ui-state-default">Sally Hogan</li> | |
| <li class="ui-state-default">Rob Omland</li> | |
| <li class="ui-state-default">John White</li> | |
| <li class="ui-state-default">Brooke Peterson</li> | |
| <li class="ui-state-default">Jordan Black</li> | |
| <li class="ui-state-default">Tammy Brown</li> | |
| <li class="ui-state-default">Mary Miller</li> | |
| <li class="ui-state-default">Carolyn Garnett</li> | |
| <li class="ui-state-default">Michelle Farley</li> | |
| <li class="ui-state-default">Michael Surgent</li> | |
| <li class="ui-state-default">Zach Baker</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( function() { | |
| $( "ul.droptrue" ).sortable({ | |
| connectWith: "ul" | |
| }); | |
| $( "ul.dropfalse" ).sortable({ | |
| connectWith: "ul", | |
| dropOnEmpty: false | |
| }); | |
| $("#sortable1, #sortable2, #sortable3").disableSelection(); | |
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box { | |
| display: flex; | |
| } | |
| .left { | |
| width: 200px; | |
| margin: 20px; | |
| } | |
| .right { | |
| width: 200px; | |
| margin: 20px; | |
| } | |
| #sortable1, #sortable2, #sortable3 { | |
| list-style-type: none; | |
| margin: 0; | |
| margin-right: 10px; | |
| background: #EEE; | |
| padding: 5px; | |
| width: 143px; | |
| min-height: 65px; | |
| border-radius: 8px; | |
| margin-top:5px; | |
| margin-bottom:5px; | |
| } | |
| #sortable1 li, #sortable2 li, #sortable3 li { | |
| margin: 5px; | |
| padding: 5px; | |
| font-size: 1.2em; | |
| width: 120px; | |
| border-radius: 5px; | |
| cursor: move; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment