Как поместить сортируемый элемент jQuery в свернутый список?

ПРОВЕРОЧНЫЙ КОД — http://jsfiddle.net/reGb3/

Я использую сортируемые списки jQuery, для которых я хотел бы перетащить элемент из одного списка в другой. У меня это работает (см. тестовый код), когда основные категории расширены, но если основной список свернут, я не могу получить отброшенный элемент для успешного заполнения скрытого списка. Я прохожу часть пути, делая элементы списка основной категории «выпадающими», а затем расширяя список, но затем мне нужно снова выполнить операцию перетаскивания. Есть ли способ сделать это либо со свернутой основной категорией (предпочтительно), либо с дополнительным шагом расширения?

HTML:

<ul data-role="listview" class="sortable-list" data-filter="true">

  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2 class="droppable"   id="cat1">EMPTY</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1" >

    </ul>
  </li>    
  <li data-role="collapsible" data-iconpos="right" data-inset="false" >
    <h2 class="droppable" id="cat2">Birds</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id1"><a href="#">Condor</a></li>
      <li id="id2"><a href="#">Eagle</a></li>
      <li id="id3"><a href="#">Sparrow</a></li>
    </ul>
  </li>
  <li data-role="collapsible" data-iconpos="right" data-inset="false" >
    <h2 class="droppable" id="cat3">Fish</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id4"><a href="#">Salmon</a></li>
      <li id="id5"><a href="#">Pollock</a></li>
      <li id="id6"><a href="#">Trout</a></li>
    </ul>
  </li>
</ul>

JavaScript:

$(document).ready(function() {
    $('.sortable-list').sortable({
      connectWith: '.sortable-list',
      dropOnEmpty: true,
      update: function(event, ui) {

      }
    });

    $(".droppable").droppable({
        drop: function( event, ui ) {           
            var collapsedList = $(this).parent() ;
            if ($(collapsedList).collapsible( "option", "collapsed" )){
                $(collapsedList).collapsible( "expand" );
            }
          }
    });

    var sortupdate = function (event, ui) {

    };

    $('.sortable-list1').on("sortupdate", sortupdate);
    $('.sortable-list1').sortable({
      connectWith: '.sortable-list1',
      dropOnEmpty: true      
    });
});

CSS:

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn {
overflow: visible !important;
}

.sortable-list1 {
    min-height:50px;
    padding:10px
}

Спасибо!


jquery jquery-ui jquery-ui-sortable jquery-mobile-collapsible
person mikec    schedule 24.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Обычно элемент из виджета sortable можно переместить в другой виджет sortable только с помощью параметра connectWith. В этом случае вы фактически перемещаете элемент из списка sortable в обычный заголовок (отбрасываемый), а не в сортируемый список. Итак, вы должны обработать событие drop. Похоже, мы можем просто добавить элемент draggable (доступ к которому осуществляется через ui.draggable) в список, связанный с выпадающим элементом в этом обработчике событий drop, но это не так просто. Это неподходящее место для добавления перетаскиваемого элемента, поскольку после некоторых этапов перетаскиваемый элемент может быть добавлен обратно в исходный список, когда цель перетаскивания не является допустимым сортируемым списком, поэтому добавление завершится ошибкой. Я думаю, мы должны найти обходной путь. В обработчике событий drop мы можем просто сохранить ссылку на список, к которому следует добавить перетаскиваемый элемент. Затем нам нужно обработать событие sortstop, проверить, является ли ссылка на целевой список допустимой (не нулевой), прежде чем добавлять перетаскиваемый элемент (доступ к которому можно получить через ui.item) в этот список. Вот отредактированный код:

var receiver;
$(".droppable").droppable({
    drop: function( event, ui ) {           
          var collapsedList = $(this).parent() ;
          if ($(collapsedList).collapsible( "option", "collapsed" )){
            $(collapsedList).collapsible( "expand" );
          }            
              //save the target list to receiver for later appending
              receiver = $(this).parent().find('.sortable-list1');
        }
});

$('.sortable-list1').sortable({
        connectWith: '.sortable-list1',
        dropOnEmpty: true,
        //handle the sortstop event
        stop: function(e,ui){
              //check if receiver is valid (not null)
              if(receiver){
                receiver.append(ui.item);
                receiver = null; //remember to reset it to null
              }
            }
});

Демо.

person King King    schedule 25.06.2014
comment
Кинг Кинг, ты молодец! Спасибо за решение! - person mikec; 25.06.2014