我想有一个可排序的列表,但我也希望该列表中的元素可以拖放到我定义为droppable的div。我似乎没有找到办法。有任何想法吗?
解决方法
这里是Colin的解决方案的简化版本。
最大的区别是,此解决方案不存储可排序元素的整个HTML,而只存储当前拖动的项。如果物品掉在可放置区域上,则将其插入其原始位置。
无论如何,这里的代码:
<!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>
如果项目被拖动到列表中的新位置并且然后被放置在< ul>之外,它仍然遇到与Colin的解决方案相同的问题。和可投放的< div> ;.该项目不会重置,但会采取列表中的最后一个位置(在Google Chrome中测试)。无论如何,这是很容易解决与一些鼠标超过检测或甚至可能是理想的行为。