Menu
I want to have a list that is sortable, but I also want the elements in that list to be droppable to the divs I have defined as droppable. I can't seem to find a way to do it. Any ideas?
740
jQueryUI Sortable. jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the mouse. The sorting ability of this method is based on an operation string passed as the first parameter.
$ (selector, context). droppable (options) Method. The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements. The options parameter is an object that specifies the behavior of the elements involved.
ui-sortable-handle : The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle. ui-sortable-placeholder : The element used to show the future position of the item currently being sorted.
Here's a simplified version of Colin's solution.
The biggest difference is that this solution does not store the entire html of the sortable elements, but only the currently dragged item. It is then inserted into it's original position if the item is dropped on the droppable area.
Anyway, here's the code:
<!doctype html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function() { var dropped = false; var draggable_sibling; $("#sortable").sortable({ start: function(event, ui) { draggable_sibling = $(ui.item).prev(); }, stop: function(event, ui) { if (dropped) { if (draggable_sibling.length == 0) $('#sortable').prepend(ui.item); draggable_sibling.after(ui.item); dropped = false; } } }); $(".droppable").droppable({ activeClass: 'active', hoverClass:'hovered', drop:function(event,ui){ dropped = true; $(event.target).addClass('dropped'); } }); }); </script> <style type="text/css"> #sortable li{ clear:both; float:left; } .droppable { clear:both; height:300px; width:400px; background-color:#CCC; } .droppable.active { background: #CFC; } .droppable.hovered { background: #CCF; } .dropped { background: #f52; } </style> </head> <body> <ul id="sortable"> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> <li id="four">Four</li> <li id="five">Five</li> <li id="six">Six</li> </ul> <div class="droppable">Drop Here</div> <div class="droppable">Drop Here</div> </body> </html> It still suffers the same problem as Colin's solution if an item is dragged into a new position in the list and then dropped outside both the <ul> and the droppable <div>. The item will then not reset but take the last position in the list (tested in Google Chrome). Anyway, this is easily solved with some mouse over detection or it may even be desirable behaviour.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
