1

オレンジ、ブルー、グリーンの複数の色のリストがあります。私の実際のアプリケーションでは、チーム A とチーム B の2 つの場所しかありません.droppable()。私のフィドルの例では、色を使用しています。ここで見ることができますFIDDLE。

各ボックスで 1 つの色のみが許可されるように記述する方法がわかりません (既に内部にある現在の色がメニュー リストに送り返され、新しいドラッグ可能なアイテムが現在の色になります)。

私は絶え間なくいじり、グーグルでそれを理解できると確信していますが、うまくいけば誰かがこれを経験したことがあるでしょう。

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 の問題がそれを微調整することを知っています) 1 つの色を各ボックスにドラッグすると、1 つの色だけが残ります。その残りの色を使用して、それをいずれかのボックスにドラッグすると、そのボックス内の色がメニューに戻されます。

関数があるかどうかはわかりません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 に答える