Question

我有一个包含 tiles 的可排序对象。另外，我有一堆droppables。我想要以下互动：

用户可以将sortable的tile out 拖到某个dropable上。理想情况下，这会将移动从可排序区域中移出并将其附加到droppable。此外，可投影仪不应再接受任何东西，即一个投影仪上最多可以有一个图块。我在这个小提琴http://jsfiddle.net/yXeMw/2/中尝试了它，但无法让“移动”起作用。

一旦有效，用户还应该能够将droppable的tile out 移回到sortable，我在这里尝试过:(由于2个链接限制删除了链接，是同一个小提琴的第3版。）但也失败了。（我只是尝试了警告，因为我认为“从...移动到...”部分应该是相同的。）请参阅更新1.

我已经尝试了几天而且无法解决这个问题。

PS：我在SO上已经阅读了大量类似的问题，但没有一个与我的问题完全相同，即将元素从可排序元素移动到dropable。

编辑：我欢迎使用Mootools的替代解决方案。

更新1：可放置 - ＆gt;可排序的方向只是不起作用，因为我在可排序的内部瓷砖具有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();
    }
});

jQueryUI：将sortable的元素移动到droppable和back（或mootools替代）

1 个答案: