1

我有一个包含tiles的 sortable 。另外，我有一堆droppables。我想要以下交互：

用户可以将图块从可排序对象中拖到一些可放置对象上。理想情况下，这会将图块移出可排序并将其附加到可放置。此外，droppable 不应该再接受任何东西，即在一个 droppable 上最多可以有一个 tile。我在这个小提琴http://jsfiddle.net/yXeMw/2/中尝试过，但无法让“移动”工作。

一旦这样工作，用户还应该能够将磁贴从可放置对象移回可排序对象，我在这里尝试过：（由于 2 个链接限制，删除了链接，是同一个小提琴的第 3 版。）但也失败了. （我只尝试了警报，因为我认为“从..移动到..”部分应该是相同的。）见更新 1。

我已经尝试了几天，只是无法弄清楚。

PS：我在这里阅读了大量关于 SO 的类似问题，但没有一个与我的问题真正相同，即将元素从可排序元素移动到可放置元素。

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

更新 1： droppable -> sortable 方向不起作用，因为我在 sortable 中的图块具有float: left有效地使 sortable 本身的大小为 0px 的属性，因此无法悬停。固定小提琴：http: //jsfiddle.net/yXeMw/5/

更新 2：虽然我找到了解决方法（请参阅我的答案），但我仍然希望有一个移动元素的解决方案。我无法得到任何appendTo或append工作。

4

1 回答 1

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();
    }
});
于 2012-03-06T08:42:10.833 回答