diff options
| -rw-r--r-- | demos/sortable/with-droppable.html | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/demos/sortable/with-droppable.html b/demos/sortable/with-droppable.html new file mode 100644 index 000000000..d9b62f5b7 --- /dev/null +++ b/demos/sortable/with-droppable.html @@ -0,0 +1,64 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Sortable - Connected With Droppable</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.1.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.sortable.js"></script> + <script type="text/javascript" src="../../ui/ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } + #sortable li span { position: absolute; margin-left: -1.3em; } + + #trash { width: 58%; height: 8em; padding: 1%; margin-top: 1%; } + #trash h4 { line-height: 16px; margin: 0 0 0.4em; } + #trash h4 .ui-icon { float: left; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable").sortable(); + $("#trash").droppable({ + accept: '#sortable > li', + activeClass: 'ui-state-highlight', + drop: function(ev, ui) { + if (ui.draggable.is('#special')) { + setTimeout(function() { ui.draggable.remove(); }, 1); + } else { + ui.draggable.remove(); + ui.draggable.html('<strong>I was dropped and removed, but still here I am!</strong>'); + } + } + }); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default" id="special"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 - I am special! I will be removed when I'm dropped.</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> +</ul> + +<div id="trash" class="ui-widget-content ui-state-default"> + <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Drop us here</h4> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>This is a testcase for <a href="http://dev.jqueryui.com/ticket/4088">#4088</a>. Burn after resolving.</p> + +</div><!-- End demo-description --> + +</body> +</html> |