我想要一个可排序的列表，但我也希望该列表中的元素可拖放到我定义为可拖放的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>和droppable <div>之外，则仍然遇到与Colin解决方案相同的问题。然后，该项目将不会重置，但会在列表中处于最后位置(在Google Chrome中测试)。无论如何，这可以通过鼠标悬停检测很容易地解决，甚至可能是理想的行为。关于jquery - jQuery可排序和可拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2090121/