我想要一个可排序的列表，但我也希望该列表中的元素可放置到我定义为可放置的 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 中测试)。不管怎样，通过一些鼠标悬停检测可以很容易地解决这个问题，或者它甚至可能是理想的行为。
关于jQuery 可排序和可删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2090121/