Как комбинировать аккордеон со связанными сортируемыми списками

Я пытаюсь поместить сортируемый список jquery-ui в разделы аккордеона и подключить эти списки. Идея состоит в том, чтобы создать компактный и интуитивно понятный интерфейс для сортировки элементов по нескольким различным категориям. Элементы обычно сортируются в пределах одного раздела, но иногда они могут быть перенесены в другой раздел «аккордеон».

Я почти там: http://jsfiddle.net/arasbm/H5MRw/7/

Вот образец HTML-кода:

<div id="accordion">
   <h3 class="accordion-header"><a href="#">good</a></h3>
   <div class="accordion-section">
       <ul class="sortable-list">
           <li>dog</li>
           <li>butter</li>
       </ul>
   </div>
   ...
</div>

И javascript:

// Setup the accordion
$("#accordion").accordion();
var $accordion = $("#accordion").accordion();

//Setup the sortable list
$("ul.sortable-list").sortable({
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother
    stop: function(event, ui) {
        console.log("an item was moved");
    }
}).disableSelection();

$("h3.accordion-header").droppable({
    over: function(event, ui) {
        //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion
        $(this).css('color', 'red');
        $accordion.accordion('activate', $(this));
    },
    out: function(event, ui) {
        $(this).css('color', 'green');
    }
});

Часть, которая еще не работает, показывает пользователю правильную визуальную обратную связь, пока элемент перетаскивается из одного списка в другой. Когда пользователь перетаскивает элемент поверх заголовка другого раздела аккордеона, этот раздел активируется, однако по какой-то причине элемент, использованный во время перетаскивания, каким-то образом исчезает. Элемент на самом деле все еще там, и если вы продолжите перетаскивать его в список, вы увидите, что отображается заполнитель, и вы можете перетащить элемент в новое место.

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


jquery jquery-ui jquery-ui-sortable jquery-ui-accordion
person Aras    schedule 27.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Фактически проблема в том, что перетаскиваемый элемент принадлежит div accordion-section. Когда вы наводите курсор на другой раздел, текущий div будет скрыт за перетаскиваемым элементом.

Итак, чтобы решить проблему, вы можете создать ul temporary для хранения перетаскиваемого элемента. Этот ul будет удален в конце события перетаскивания.

Javascript:

// Setup the accordion
//$("#accordion").accordion();
var $accordion = $("#accordion").accordion();

//Setup the sortable list
$("ul.sortable-list").sortable({
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother
    stop: function(event, ui) {
        console.log("an item was moved");
        $accordion.find("#tmp").remove();
    },
    start: function(event, ui){
        $accordion.append("<ul id='tmp'></ul>");
        $accordion.find("#tmp").append(ui.item);
    }
}).disableSelection();

$("h3.accordion-header").droppable({
    over: function(event, ui) {
        //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion
        $(this).css('color', 'red');
        $accordion.accordion('activate', $(this));
    },
    out: function(event, ui) {
        $(this).css('color', 'green');
    }
});

Здесь есть пример скрипки. Надеюсь, этот код вам поможет, но вы можете настаивать на перемещении перетаскиваемого элемента, я не знаю почему.

person Charles Jourdan    schedule 27.12.2012
comment
Это законное решение и, безусловно, делает то, что мне нужно. Большое тебе спасибо! - person Aras; 27.12.2012