jQueryUI: переместите элемент сортируемого объекта в droppable и обратно (или альтернативу mootools)

Question

У меня есть один сортируемый, который содержит плитки .Кроме того, у меня есть куча капель.Я хочу следующее взаимодействие:

Пользователь может перетаскивать плитки из из сортируемой на некоторую каплю.В идеале это переместит плитку из сортируемой и добавит ее в пипетку.Кроме того, сбрасываемый предмет больше не должен принимать, т. Е. На одном сбрасываемом элементе может быть не более одной плитки.Я попробовал это в этой скрипке http://jsfiddle.net/yXeMw/2/, но не могу заставить "двигаться" работать.

Как только это сработает, пользователь также сможет перемещать плитку из отбрасываемого обратно к сортируемому, который я пробовал здесь: (удаленная ссылка из-за ограничения 2 ссылок, была версия 3 той же скрипки), но тоже не удается.(Я пробовал только с предупреждением, так как думаю, что часть «переместить из .. в ..» должна быть такой же.) См. Обновление 1.

Я пробовал это несколько днейи просто не могу понять.

PS: Я прочитал тонны подобных вопросов здесь, на SO, но ни один из них не является тем же самым, что и моя проблема, то есть перемещение элемента из сортируемого в отбрасываемый.

Редактировать: я бы приветствовал альтернативное решение с использованием Mootools.

Обновление 1: Направление падения -> сортируемое, только не работало, потому что мои плитки внутри сортируемогоимеет атрибут float: left, который фактически делает сортируемую саму размером 0px, что делает невозможным зависание.Исправленная скрипка: http://jsfiddle.net/yXeMw/5/

Обновление 2: Хотя я нашел обходной путь (см. Мой ответ), я все же хотел бы иметь решение, которое перемещает элемент,Я не мог заставить работать appendTo или append.

Answer 1

Итак, я узнал, как имитировать это.Я не на 100% удовлетворен этим решением, потому что оно на самом деле не перемещает элемент, поэтому я приму любое лучшее решение.

Вместо этого я создаю новый элемент, удаляю старыйодин и спрятать помощника.И clone, и appendTo, похоже, не работают.

Вот скрипка: http://jsfiddle.net/VyfkE/1/

А также код на случай, если скрипка потеряется.

html:

<div class="slot">Drop one here</div>
<div class="slot">Or one here</div>

<div class="sortable">
    <div class="tile">item 1</div>
    <div class="tile">item 2</div>
    <div class="tile">item 3</div>
</div>

css:

.slot {
    background-color: forestgreen;
    width:100px;
    height:100px;
    border: 1px solid black;
}

.sortable {
    display:table-row;
    background: #44F;
}

.tile {
    display:table-cell;
    background: firebrick;
    border: 1px solid black;
    width: 50px;
    height: 25px;
}

и, наконец, JavaScript:

$(".slot").droppable({
    drop: function(ev, ui) {
        // Only want one tile per droppable!
        if ($(this).children().length === 0) {
            // Create the new element which will be inside the droppable.
            cl = $('<div>').addClass('tile').text(ui.draggable.text()).css({
                background: 'cornflowerblue'
            });
            // Make it draggable back into the sortable.
            cl.draggable({
                connectToSortable: '.sortable',
                helper: 'clone' // <-- This is important!
            });
            $(this).append(cl);

            // And remove the element from the sortable.
            ui.helper.hide();
            ui.draggable.remove();
        }
    }
});
$(".sortable").sortable({
    connectWith: '.slot',
    revert: true,
    helper: 'clone', // <-- This is important, again!
    receive: function(ev, ui) {
        // If we get some item from a droppable, remove it from there.
        ui.item.remove();
    }
});