Question

我有多种颜色的列表，橙色，蓝色，绿色。只有两个.droppable()个地方，在我的实际应用中，这是团队A与团队B，在我的小提琴示例中，我使用颜色。您可以在此处看到 FIDDLE 。

我不确定如何编写它以便每个框中只允许一种颜色（已经在内部的当前颜色被发送回菜单列表，新的可拖动项目变为当前颜色）

我确信通过不断的摆弄和谷歌搜索，我可以弄清楚，但希望有人经历过这一点，似乎这将是非常共同的（无法在此找到任何ATM）。

以下是Jquery和HTML的片段

jQuery：

$('#menu li').draggable({
    helper: "clone",
    containment: "document"
});

$('.left .show, .right .show').droppable({
    drop: function (event, ui) {
        ui.draggable.detach();
        $(this).addClass(ui.draggable.attr('data-team'))
    }
});

HTML：

<div id="jsFiddle">
    <div id="open-menu">< Open Menu</div>
    <div id="menu">
        <ul>
            <li data-team="orange">orange</li>
            <li data-team="blue">blue</li>
            <li data-team="green">green</li>
        </ul>
    </div>
    <div id="display">
        <div class="left">
            <div class="show"></div>
        </div>
        <div class="right">
            <div class="show"></div>
        </div>
    </div>
</div>

再一个小提琴应该解释所有，打开菜单（我知道一些z-index问题与draggable元素将调整出来）将一种颜色拖入每个框，然后你只留下一种颜色。使用剩余的颜色，你应该能够将它拖到任何一个框中，并且该框中的任何颜色都会被发送回菜单。

我不确定是否有reattach函数，但基本上我需要重新附加被覆盖的菜单颜色，然后分离新颜色。

看起来很简单，我可能会弄明白，但对于你们中的一些人来说，这可能是一个不错的小问题。

我更新的小提琴 仍然需要调整：我在这里摆弄和摆弄更多的是http://jsfiddle.net/3X5jW/5/

我仍然希望看到答案并奖励最佳答案，也许有一个比我更简单的解决方案。

Answer 1

$('.left .show, .right .show').droppable({
  drop: function (event, ui) {
    if($(this).data('color') != undefined){
        $(this).removeClass($(this).data('color'));
        $('#menu ul').append('<li data-team="'+$(this).data('color')+'">'+$(this).data('color')+'</li>');
        $('#menu li').draggable({
            helper: "clone",
            containment: "document"
        });
    }
    ui.draggable.detach();
    $(this).addClass(ui.draggable.attr('data-team'));
    $(this).data('color',ui.draggable.attr('data-team'));
  }
});

http://jsfiddle.net/3X5jW/6/

将.droppable（）限制为只有一个项目？

1 个答案: