Пробую сделать взаимодействие двух списков по механизму описаному здесь:
http://jqueryui.com/demos/draggable/#sortable
Вроде бы работает, но как то странно - если перенести из одного списка в другой - объекты накладываются друг на друга. Такое ощущение что не отключается абсолютное позиционирование объектов.
Вот код:
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; background:gray;}
.demo li { margin: 5px; padding: 5px; width: 150px; border:1px solid silver;}
.sortable {height:300px;}
.right {text-align:right;}
</style>
<script type="text/javascript">
$(function() {
$(".sortable").sortable({
revert: true
});
$(".draggable").draggable({
connectToSortable: '.sortable',
helper: 'original',
revert: 'invalid'
})
$("ul, li").disableSelection();
});
</script>
<div class="demo">
<ul class="sortable">
<li class="draggable">Item 1</li>
<li class="draggable">Item 2</li>
<li class="draggable">Item 3</li>
<li class="draggable">Item 4</li>
<li class="draggable">Item 5</li>
</ul>
<ul class="sortable">
<li class="draggable right">Object 1</li>
<li class="draggable right">Object 2</li>
<li class="draggable right">Object 3</li>
<li class="draggable right">Object 4</li>
<li class="draggable right">Object 5</li>
</ul>
</div>
