Created
January 4, 2011 17:58
-
-
Save Zoramite/765117 to your computer and use it in GitHub Desktop.
Testing the ability to ctrl + drag to copy a sortable element
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul, | |
| ol { | |
| list-style: none; | |
| } | |
| p { | |
| margin: 1em .5em; | |
| } | |
| .box { | |
| float: left; | |
| display: block; | |
| width: 25%; | |
| min-height: 10em; | |
| margin: .5em; | |
| padding: 0 .5em; | |
| border: 1px solid #000; | |
| } | |
| .box li { | |
| background: #d2d2d2; | |
| margin: .5em 0; | |
| padding: .25em .5em; | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jQuery UI Sortable Ctrl Copy Test</title> | |
| <link rel="stylesheet" href="sortableCopy.css" /> | |
| </head> | |
| <body> | |
| <div> | |
| <p> | |
| Hold down <code>ctrl</code> when dropping the list item on a | |
| different list to copy the item to the new list. | |
| </p> | |
| </div> | |
| <ul id="box1" class="box"> | |
| <li>A</li> | |
| <li>B</li> | |
| <li>C</li> | |
| <li>D</li> | |
| </ul> | |
| <ul id="box2" class="box"> | |
| <li>E</li> | |
| <li>F</li> | |
| </ul> | |
| <ul id="box3" class="box"> | |
| <li>G</li> | |
| <li>H</li> | |
| <li>I</li> | |
| <li>J</li> | |
| </ul> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> | |
| <script src="sortableCopy.js"></script> | |
| </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($) { | |
| var areas; | |
| $(function() { | |
| areas = $('.box'); | |
| // Store the original order of the li elements | |
| updateAreas(); | |
| areas.sortable({ | |
| dropOnEmpty: true, | |
| connectWith: areas, | |
| receive: receiveAreas, | |
| stop: updateAreas | |
| }); | |
| }); | |
| function receiveAreas(event, ui) { | |
| var cloned; | |
| var isACopy = event.ctrlKey == true; | |
| var previousIndex; | |
| var sender; | |
| if(isACopy) { | |
| cloned = $(ui.item[0]).clone(true); | |
| previousIndex = cloned.data('previousIndex'); | |
| sender = $(ui.sender[0]); | |
| // Insert the clone into the same index it was previously | |
| if(previousIndex == 0) { | |
| sender.prepend(cloned); | |
| } else { | |
| $('li:eq(' + (previousIndex - 1) + ')', sender).after(cloned); | |
| } | |
| } | |
| } | |
| function updateAreas() { | |
| areas.each(function(){ | |
| $('li', this).each(function(index){ | |
| $(this).data('previousIndex', index); | |
| }); | |
| }); | |
| } | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment