Created
March 13, 2015 03:26
-
-
Save rchavik/6d63deb19c2536031e69 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/witura
This file contains hidden or 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> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script src="https://raw.githubusercontent.com/rchavik/zepto-dnd/5ab58c839be3c6a65b69354847726576ec40e2c6/zepto-dnd.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| h3, h4 { | |
| margin: 5px; | |
| } | |
| .dragme { | |
| padding: 10px; | |
| border: 1px solid gray; | |
| border-radius: 6px; | |
| margin: 5px; | |
| float: left; | |
| max-width: 200px; | |
| } | |
| .dragme.placeholder { | |
| opacity: 0.5; | |
| min-height: 30px; | |
| min-width: 30px; | |
| border: 1px solid red ; | |
| } | |
| .dragme .handle { | |
| margin: 5px 0; | |
| } | |
| #source, | |
| #target, | |
| #catchall, | |
| #wayoff { | |
| float: left; | |
| display: inline-block; | |
| outline: 1px solid #ccc; | |
| margin: 5px; | |
| min-height: 150px; | |
| min-width: 150px; | |
| } | |
| #wayoff { | |
| position: absolute; | |
| left: 1300px; | |
| top: 1300px; | |
| margin: 0 10px 10px 0; | |
| background: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="display:table-row"> | |
| <div id="source"> | |
| <h4>Sortable</h4> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| <img src="http://lorempixel.com/100/100"></img> | |
| <p>A Bc def ghij klm nopqr stuvw xyz</p> | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| B | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| C | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Unselectable Text | |
| </div> | |
| </div> | |
| <div id="target"> | |
| <h4>Sortable</h4> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| <img src="http://lorempixel.com/100/100/cats"></img> | |
| <p>A Bc def ghij klm nopqr stuvw xyz</p> | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Y | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Selectable Text | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: table-row"> | |
| <div id="catchall"> | |
| <h4>Droppable</h4> | |
| </div> | |
| </div> | |
| <div id="wayoff"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $(function() { | |
| $('#source').sortable({ | |
| animate: 1000, | |
| connectWith: '#target', | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| items: '.dragme' | |
| }); | |
| $('#target').sortable({ | |
| animate: 1000, | |
| connectWith: "#source", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#catchall').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#wayoff').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
| <script src="https://raw.githubusercontent.com/rchavik/zepto-dnd/5ab58c839be3c6a65b69354847726576ec40e2c6/zepto-dnd.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div style="display:table-row"> | |
| <div id="source"> | |
| <h4>Sortable</h4> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| <img src="//lorempixel.com/100/100"></img> | |
| <p>A Bc def ghij klm nopqr stuvw xyz</p> | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| B | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| C | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Unselectable Text | |
| </div> | |
| </div> | |
| <div id="target"> | |
| <h4>Sortable</h4> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| <img src="//lorempixel.com/100/100/cats"></img> | |
| <p>A Bc def ghij klm nopqr stuvw xyz</p> | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Y | |
| </div> | |
| <div class="dragme"> | |
| <h3 class="handle">Handle</h3> | |
| Selectable Text | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: table-row"> | |
| <div id="catchall"> | |
| <h4>Droppable</h4> | |
| </div> | |
| </div> | |
| <div id="wayoff"> | |
| </div> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">h3, h4 { | |
| margin: 5px; | |
| } | |
| .dragme { | |
| padding: 10px; | |
| border: 1px solid gray; | |
| border-radius: 6px; | |
| margin: 5px; | |
| float: left; | |
| max-width: 200px; | |
| } | |
| .dragme.placeholder { | |
| opacity: 0.5; | |
| min-height: 30px; | |
| min-width: 30px; | |
| border: 1px solid red ; | |
| } | |
| .dragme .handle { | |
| margin: 5px 0; | |
| } | |
| #source, | |
| #target, | |
| #catchall, | |
| #wayoff { | |
| float: left; | |
| display: inline-block; | |
| outline: 1px solid #ccc; | |
| margin: 5px; | |
| min-height: 150px; | |
| min-width: 150px; | |
| } | |
| #wayoff { | |
| position: absolute; | |
| left: 1300px; | |
| top: 1300px; | |
| margin: 0 10px 10px 0; | |
| background: yellow; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(function() { | |
| $('#source').sortable({ | |
| animate: 1000, | |
| connectWith: '#target', | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| items: '.dragme' | |
| }); | |
| $('#target').sortable({ | |
| animate: 1000, | |
| connectWith: "#source", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#catchall').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#wayoff').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| });</script></body> | |
| </html> |
This file contains hidden or 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
| h3, h4 { | |
| margin: 5px; | |
| } | |
| .dragme { | |
| padding: 10px; | |
| border: 1px solid gray; | |
| border-radius: 6px; | |
| margin: 5px; | |
| float: left; | |
| max-width: 200px; | |
| } | |
| .dragme.placeholder { | |
| opacity: 0.5; | |
| min-height: 30px; | |
| min-width: 30px; | |
| border: 1px solid red ; | |
| } | |
| .dragme .handle { | |
| margin: 5px 0; | |
| } | |
| #source, | |
| #target, | |
| #catchall, | |
| #wayoff { | |
| float: left; | |
| display: inline-block; | |
| outline: 1px solid #ccc; | |
| margin: 5px; | |
| min-height: 150px; | |
| min-width: 150px; | |
| } | |
| #wayoff { | |
| position: absolute; | |
| left: 1300px; | |
| top: 1300px; | |
| margin: 0 10px 10px 0; | |
| background: yellow; | |
| } |
This file contains hidden or 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() { | |
| $('#source').sortable({ | |
| animate: 1000, | |
| connectWith: '#target', | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| items: '.dragme' | |
| }); | |
| $('#target').sortable({ | |
| animate: 1000, | |
| connectWith: "#source", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#catchall').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| $('#wayoff').droppable({ | |
| animate: 1000, | |
| accept: ".dragme", | |
| dragImage: false, | |
| placeholder: 'placeholder', | |
| clonePlaceholder: true, | |
| handle: '.handle', | |
| items: '.dragme' | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment