0

特定の領域に 3 つの div を表示しようとするために、jquery ui のドラッグ アンド ドロップが可能でした。コードは次のとおりです。 --CSS:

#content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; }
        #content-2 { width: 200px; height: 100px; border: 1px solid red; display: none; }
        #content-3 { width: 200px; height: 100px; border: 1px solid red; display: none; }

--js:

$(function() {
            $("#li-1").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".ui-widget-content").droppable({
                drop: function(event, ui) {
                    $("#content-1").show();
                }
            });
            $("#li-2").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".ui-widget-content").droppable({
                drop: function(event, ui) {
                    $("#content-2").show();
                }
            });
            $("#li-3").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".ui-widget-content").droppable({
                drop: function(event, ui) {
                    $("#content-3").show();
                }
            });
        });

--HTML:

<div id="products">
        <div id="catalog">
            <div>
                <ul>
                    <li id="li-1">dashboard-1</li>
                    <li id="li-2">dashboard2</li>
                    <li id="li-3">dashboard3</li>
                </ul>
            </div>

        </div>
    </div>
    <div id="cart">
        <div class="ui-widget-content">
            <div id="content-1"></div>
            <div id="content-2"></div>
            <div id="content-3"></div>
        </div>
    </div>

その結果、表示できる div は 1 つだけです。このコードのバグは何ですか? 前もって感謝します！

4

1 に答える 1

1

あなたのコードをhttp://jsbin.comに置いて、そこで何が起こっているのかを確認するのは面倒でした。次回はぜひご自分でやってみてください。

あなたの問題は、同じ関数.droppableを同じ要素に定義していることです.ui-widget-content。したがって、当然、同じ関数の定義を 3 回書き直しており、最後の定義だけが機能しています。

これを行う方法は次のとおりです。 

$(function() {
        $("#li-1").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#li-2").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#li-3").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $(".ui-widget-content").droppable({
            drop: function(event, ui) {

              // Retrieving the id of the element being dragged
              var element = ui.draggable.attr('id');

              if (element == "li-1") {
                $("#content-1").show();
              } else if (element == "li-2") {
                $("#content-2").show();
              } else if (element == "li-3") {
                $("#content-3").show();
              }
            }
        });
    });

デモ: http://jsbin.com/ozixur/3/edit

于 2013-04-25T19:11:21.413 に答える