javascript - jQuery可拖动droppable不能显示多个div

Question

我按照 jquery ui draggable and 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。这段代码中的错误是什么？提前致谢！

Answer 1

我不厌其烦地将您的代码放入http://jsbin.com以查看那里发生了什么。下次请注意自己做。

您的问题是您正在.droppable为相同的元素定义相同的功能.ui-widget-content。所以很自然地，你要重写同一个函数的定义三遍，只有最后一个定义有效。

这是您希望完成的方式：

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