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。这段代码中的错误是什么？提前谢谢！

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

Jquery draggable droppable无法显示多个div

1 个答案: