1

我有多种颜色的列表，橙色、蓝色、绿色。只有两个.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 问题会调整它）将一种颜色拖到每个框中，然后你只剩下一种颜色。使用剩余的颜色，您应该能够将其拖到任一框中，并且该框中的任何颜色都将发送回菜单。

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

看起来很简单，我可能会弄清楚，但这对你们中的一些人来说可能是一个不错的小刷子。

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

我还是想看答案，奖励最好的答案，也许有比我的更简单的解决方案。

4

1 回答 1

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/

于 2013-10-24T22:19:18.393 回答