Jquery draggable droppable不能显示多个div

Question

我遵循了jquery ui的draggable和droppable，尝试在特定区域中显示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。这段代码中的bug是什么？提前感谢！

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