Насколько я могу судить, проблема с предыдущим кодом, который я разместил, заключалась в том, что функция перетаскивания Droppable вызывалась до поднятия мышью сортируемого, и, поскольку я переписал список, сортируемый разозлился лучших условий). Это несколько предположение.
Глядя на окончательный код:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
var dropped = false;
var templateHtml;
$(document).ready(function(){
setSortable();
$("#droppable").droppable({
activeClass: 'active',
hoverClass:'hovered',
accept:".drop",
drop:function(event,ui){
dropped = true;
//alert(ui.draggable.text());
}
});
});
function setSortable(){
$("#sortable").sortable({
stop:function(event,ui){
if(dropped){
$("#sortable").sortable('destroy').html(templateHtml);
dropped = false;
setSortable();
}
}
});
$("#sortable li").addClass("drop").bind('mousedown',function(){
templateHtml = $("#sortable").html();
});
}
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
#droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
#droppable.active {
background-color:#CFC;
}
#droppable.hovered {
background-color:#CCF;
}
</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 id="droppable">
Drop Here
</div>
</body>
Здесь задействованы тонны причуд.
Я пытался сохранить #sortable html в стартовом событии sorttable, но этот get вызывается после того, как все ui-css применено, и в итоге поместил элементы списка в безумные места. Итак, мне нужно было использовать функцию mousedown на LI.
setSortable находится в функции, потому что событие stop перезаписывает sortable, что, я думаю, является "рекурсивным". Не уверен, точная терминология здесь, но мы можем пойти с досадно запутывающим.
К счастью, функция отбрасывания droppable вызывается перед функцией остановки sortables, поэтому я смог установить глобальную переменную «drop», которая использовалась для проверки, был ли удален элемент.
Я все еще удивлен, что это было не так легко сделать, я думал, что jQuery будет иметь функции, чтобы справиться с этим намного лучше. Возможно, я что-то упустил?