Я использую список сортировки пользовательских списков jquery, чтобы позволить моим пользователям выбирать и заказывать два списка и изменять элементы между ними.
Если вы не знакомы с сортировкой jquery, фактический код очень прост:
Html
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
JS
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
Вы можете попробовать его здесь: http://jsfiddle.net/9jQKu/
Моя проблема в том, что если вы удалите один из списка, перетащив все элементы в другой, вы действительно потеряете этот столбец, и вы не сможете вернуть элемент в пустой столбец.
Как я могу это исправить?
пс. Кроме того, почему не реагирует на курсор: ручной стиль?
Просто замените ваш css следующим:
#sortable1, #sortable2 {
cursor:pointer;
list-style-type: none;
margin: 0;
padding: 0 0 2.5em;
float: left;
margin-right: 10px;
min-width:200px;
Дайте ему ширину и минимальную высоту, как это, я думаю, что это единственный способ исправить "ошибку",
min-height:250px;
width:140px;
По моему скромному мнению, я бы просто добавил:
#sortable1 {
display:block;
width:120px
}
Он сохраняет ваш список ul, существующий в макете, даже если он не имеет внутри.
Я тестировал его быстро на jsfiddle, и он работает :)
Также это не cursor:hand
, но cursor:pointer