2

jqueryのドラッグアンドドロップに問題があります。各「ul」から1つの要素だけをドラッグしたい。したがって、必要な結果は、赤いボックス内の「test」と「foo」です。赤いボックスにある要素を追跡するにはどうすればよいですか？

コードは次のとおりです：http： //jsfiddle.net/9edge/CTpTr/

よろしくお願いします

4

3 に答える 3

1

アイテムタイプごとに1つずつ、2つの別々のカウンターを埋めます（そして、アイテムにそれらを識別するためのクラスを与えます）。

check（）関数を使用して制限を確認し、到達したかどうかにかかわらずtrue / falseを返し、drop（）関数を使用してカウンターを更新します。

$(function() {
    var limit = 1;
    var counter_test = 0;
    var counter_foo = 0;
    $("[id=drag]").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        accept: function(item) {
            if ($(item).hasClass('test')) {
                if (counter_test >= limit) {
                    return false;
                }
            }
            else {
                if (counter_foo >= limit) {
                    return false;
                }
            }
            return true;
        },
        drop: function(e, ui) {
            if (ui.draggable.hasClass('test')) {
                counter_test++;
            }
            else {
                counter_foo++;
            }
        }
    });
});
​

フィドル

IDが修正された新しいフィドル

于 2012-08-08T08:12:58.780 に答える
1

ソリューションのアイデア: http://jsfiddle.net/CTpTr/23/。テスト要素を 1 つと foo 要素を 1 つだけ配置できますが、ドラッグ アンド ドロップは可能ですが、ドロップ可能な要素ではドロップが受け入れられません。

于 2012-08-08T08:29:48.783 に答える
0

私はあなたのフィドルを更新しました。もう少し複雑な解決策は次のとおりです。

http://jsfiddle.net/CTpTr/18/

ご覧のとおり、要素dragからIDを削除しました。liIDは、Webページ内で一意であると想定されています。これらの要素をセレクター別のセレクター（#lists li）でドラッグ可能にすることができます。次に、2つの変数を使用して、赤いdivにドラッグアンドドロップされたオブジェクトの数を追跡しました。1つ目は「限界」、2つ目は「左」です。

var limits = { test: 1, foo: 1}, left = 2;

limits（カスタムhtml5 data-dragtype属性に基づく）各リストから許可される要素の数であり、許可される要素leftの総数です。したがって、たとえば、タイプ「foo」の2つの要素とタイプ「test」の1つの要素を追加できるようにする場合は、次のように使用できます。

var limits = { test: 1, foo: 2}, left = 3;

鉱石、2つの「foo」と1つの「test」を許可したいが、合計2つの要素がある場合は、次を使用できます。

var limits = { test: 1, foo: 2}, left = 2;

ご覧のとおり、要求したバージョンよりも少し柔軟性があります。

要素がドロップされるたびに、dropイベントハンドラーはドラッグされた要素をdrg.draggable （関数の引数に注意してください(e, drg)）で取得し、そのタイプを。で取得しdraggable.data('dragtype')ます。

$(function() {
    var limits = { test: 1, foo: 1}, 
        left = 2;
    $("#lists li").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        drop: function(e, drg) {
            var draggable = $(drg.draggable), 
                dragtype = draggable.data('dragtype');
            left -=1;
            limits[dragtype] -= 1;
            if (left == 0) {
                $(this).droppable("disable");
                $('#lists li').draggable("disable");
            }
            if (limits[dragtype] == 0){
                $('li[data-dragtype=' + dragtype +']').draggable('disable');
            }
        }
    });
});​

したがって、1つのタイプについてのみ制限に達した場合はli、そのタイプの要素のみのドラッグ機能を無効にすることができます$('li[data-dragtype=' + dragtype +']').draggable('disable')。

注意すべき重要なことの1つは、別のタイプのリストを追加するのがいかに簡単かということです。たとえば、li「bar」タイプの要素を追加する場合は、次のulような要素を追加します。

<ul class="bar">
    <li data-dragtype="bar">bar1</li>
    <li data-dragtype="bar">bar2</li>
    <li data-dragtype="bar">bar3</li>
    <li data-dragtype="bar">bar4</li>
</ul>

そして、ドロップイベントハンドラーのコードを変更せずに、それに応じて変数limitsと変数を設定します。left例えば：

var limits = { test: 1, foo: 1, bar: 2}, left = 4;
于 2012-08-08T08:13:45.900 に答える