Created
March 18, 2011 17:53
-
-
Save daneroo/876528 to your computer and use it in GitHub Desktop.
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> | |
| <title>jQuery UI Sortable / Palette test</title> | |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" type="text/css" media="all" /> | |
| <style> | |
| *{margin:0;padding:0;} | |
| ul,ol | |
| {list-style: none;} | |
| .outer { | |
| width: 60%; | |
| } | |
| #palette | |
| { | |
| display: block; | |
| width: 114px; | |
| margin: 5px; | |
| float:right;clear:none; | |
| background: yellow; | |
| } | |
| .box | |
| { | |
| display:block; | |
| width: 114px; | |
| min-height: 5em; | |
| margin: 5px; | |
| float: left; clear:none; | |
| background:silver; | |
| } | |
| .box li,#palette li | |
| { | |
| display: block; | |
| width: 64px; | |
| height: 32px; | |
| margin: 2px; | |
| /*float: left; clear:none;*/ | |
| font-weight:bold; | |
| text-align: center; | |
| ZZborder: solid 1px black; | |
| } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> | |
| <script> | |
| $(function() { | |
| $('.box li').button({ | |
| icons: { | |
| primary: "ui-icon-grip-solid-horizontal" | |
| } | |
| }); | |
| $('#palette li').button({ | |
| icons: { | |
| primary: "ui-icon-gripsmall-diagonal-se" | |
| } | |
| }); | |
| $('.box').sortable({ | |
| connectWith: ".box" | |
| //receive: doPaletteMagic | |
| }); | |
| $('#palette li').draggable({ | |
| connectToSortable: ".box", | |
| helper: "clone", | |
| revert: "invalid" | |
| }); | |
| //$("li").addClass("ui-state-default"); | |
| }); | |
| function doPaletteMagic( event , ui ) { | |
| //if ( ui.sender.is('#palette') ) | |
| var ItemContent = ui.item.text(); | |
| } | |
| </script> | |
| <body> | |
| <div class="outer"> | |
| <ul id="palette" class="ui-sortable"> | |
| <li>P</li> | |
| <li>A</li> | |
| <li>L</li> | |
| <li>E</li> | |
| <li>T</li> | |
| <li>T</li> | |
| <li>E</li> | |
| </ul> | |
| <ol id="box1" class="ui-sortable box"> | |
| <li>A</li> | |
| <li>B</li> | |
| </ol> | |
| <ol id="box2" class="ui-sortable box"> | |
| </ol> | |
| <ol id="box3" class="ui-sortable box"> | |
| <li>C</li> | |
| </ol> | |
| </div> | |
| <br class="break"/> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment