jQuery Draggable Droppable不能顯示多個div

Question

我遵循可拖動和可拖放的ui jQuery，以嘗試在特定區域中顯示3個div。 這是代碼：--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。 此代碼中的錯誤是什么？ 提前致謝！

Answer 1

我很討厭將您的代碼放入http://jsbin.com，以查看那里發生了什么。 下次請自己動手做。

您的問題是，您要為相同的元素.ui-widget-content定義相同的.droppable函數。 因此，很自然，您需要重寫同一功能的定義三次，只有最后一個定義有效。

這是您希望完成的方式：

$(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