Question

I have one sortable which contains tiles. In addition, I have a bunch of droppables. I want the following interaction:

The user can drag tiles out of the sortable onto some droppable. Ideally, this would move the tile out of the sortable and append it to the droppable. In addition, the droppable should not accept anything anymore, i.e. there may be at most one tile on one droppable. I tried it in this fiddle http://jsfiddle.net/yXeMw/2/ but can’t get the “move” to work.

Once that works, the user should also be able to move the tile out of the droppable back to the sortable, which I tried out here: (removed link due to 2 links limit, was version 3 of that same fiddle.) but fails too. (I only tried with an alert as I think the “move from .. to ..” part should be the same.) See update 1.

I’ve been trying this for a few days and just can’t figure it out.

PS: I’ve read tons of similar questions here on SO, but none is really the same as my issue, i.e. moving the element from the sortable to the droppable.

Edit: I would welcome an alternative solution using Mootools aswell.

Update 1: The droppable -> sortable direction only didn’t work because my tiles inside the sortable had the float: left attribute which effectively made the sortable itself be of size 0px thus impossible to hover. Fixed fiddle: http://jsfiddle.net/yXeMw/5/

Update 2: Although I found a workaround (see my answer), I would still like to have a solution which moves the element. I couldn’t get any of appendTo or append to work.

Answer 1

So, I found out how to emulate it. I am not 100% satisfied with this solution because it doesn’t really move the element, so I will accept any better solution.

Rather, I create a new element, remove the old one and hide the helper. Both clone and appendTo don’t seem to work.

Here is the fiddle: http://jsfiddle.net/VyfkE/1/

Aswell as the code in case the fiddle will get lost.

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;
}

and finally the 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();
    }
});