Создание jQuery droppable принимает элементы из сортируемого, использующего connectWith

У меня есть отсортированный список, который использует connectWith, чтобы убедиться, что он может быть отсортирован только в своих типах списка.

Теперь я пытаюсь создать элемент droppable trash can, который отображается внизу окна просмотра, когда элемент сортируется. Этот элемент находится вне контекста списков и просто удаляет любой элемент, который его удаляет. Желаемая функциональность идентична удалению ярлыка с рабочего стола телефона Android, если вы знакомы с этим.

Проблема заключается в том, что, хотя мой мусор может быть droppable, который принимает "*", моя сортировка указана только на теги connectWith other '.dropZone', что означает, что я не могу получить ни один из моих отсортируемых элементов, чтобы вызвать hover на элементе trash.

Я попытался сделать каждую сортировку перетаскиваемой в событии start, но, конечно же, я не перетаскиваю ее в тот момент и не активирую. Возможно ли удовлетворить оба требования или мне придется обнаруживать, что мусор может парить вручную?

Ответ 1

Так как connectWith принимает селектор, вы можете предоставить ему селектор, который будет выбирать как другие связанные списки, так и ваш мусор.

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#trash").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});

Пример: http://jsfiddle.net/petersendidit/YDZJs/1/

Ответ 2

Как насчет того, чтобы мусор мог .dropZone? Затем вы получите правильное событие drop, и вы сможете правильно обрабатывать удаление.

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

Если это не соответствует вашим требованиям, не могли бы вы выбросить демо где-нибудь, чтобы мы знали, что именно нам нужно будет работать чтобы сохранить свою структуру неповрежденной, при этом добавляя необходимые функциональные возможности?