Сортировка списка с помощью jquery UI

Question

Сортировка списка с помощью jquery UI

0

Я использую список сортировки пользовательских списков 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/

Моя проблема в том, что если вы удалите один из списка, перетащив все элементы в другой, вы действительно потеряете этот столбец, и вы не сможете вернуть элемент в пустой столбец.

Как я могу это исправить?

пс. Кроме того, почему не реагирует на курсор: ручной стиль?

DomingoSL 25 сен. 2013, в 15:23

Источник

Теги:

jquery

jquery-ui

3 ответа

1

Дайте ему ширину и минимальную высоту, как это, я думаю, что это единственный способ исправить "ошибку",

min-height:250px;
width:140px;

DEMO

Anton 25 сен. 2013, в 10:18

0

По моему скромному мнению, я бы просто добавил:

 #sortable1 {
  display:block;
  width:120px
 }

Он сохраняет ваш список ul, существующий в макете, даже если он не имеет внутри.

Я тестировал его быстро на jsfiddle, и он работает :)

Также это не cursor:hand, но cursor:pointer

user1713964 25 сен. 2013, в 11:25

Ещё вопросы

Dhaval Bharadva · Accepted Answer · 2013-09-25T11-15-00.000Z

Просто замените ваш css следующим:

#sortable1, #sortable2 {
  cursor:pointer;
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
  min-width:200px;

}
JSFIDDLE DEMO