Swap sortable list, draggable
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type='text/css'> .news-list { padding: 0; } .news-list li { cursor: pointer; display: inline-block; padding: 5px 10px; border-radius: 5px; -moz-border-radius: 5px; background: #fff; margin: 0 10px 0 0; } .news-list.interested li { background: #74ce9c; } .source-news h3 { font-size: 13px; margin: 0; } .interested-in { background: #e9f5f1; border-radius: 4px; -moz-border-radius: 4px; padding: 13px 18px; margin: 18px 0 0 0; } .interested-in h3 { color: #74ce9c; font-size: 13px; margin: 0; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(function () { var oldList, newList, item; $(".categories-sortable").sortable({ connectWith: $('.categories-sortable'), start: function (event, ui) { item = ui.item; newList = oldList = ui.item.parent(); }, stop: function (event, ui) { console.log("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id')); }, change: function (event, ui) { if (ui.sender) { newList = ui.placeholder.parent(); } }, }) .disableSelection(); }); });//]]> </script> </head> <body> <div class='source-news'> <h3>Please choose your category preferences from the following list by simply draging your choices into the box below.</h3> <ul id="categories-source" class='news-list categories-sortable'> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> </div> <div class='interested-in'> <h3>I'm interested in:</h3> <ul id="categories-chosen" class='news-list interested categories-sortable'> <li class="ui-state-default">I have been chosen</li> <li class="ui-state-default">Another chosen</li> </ul> </div> <input type="button" name="button" class="button" value="get group" /> </body> </html> |
