javascript - 简单的 jQuery droppable 不工作

Draggable 在这里工作，但是当我将 DIV 拖到可放置区域时，警报功能没有触发。我敢肯定这是愚蠢的事情，但也许这里有人可以阻止我用头撞墙，我做错了什么？

<head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
            <title></title>
        </head>
        <body>

    <script>
            $(function() {
                $( ".draggable" ).draggable();
                $( ".droppable" ).droppable({
                    drop: function(event, ui) {
                        alert('dropped');
                    }
                });
            });
    </script>

        <div id=10 class="draggable">one</div>

        <div id="trash" class="droppable"></div>



        </body>
        </html>

最佳答案

问题在于，默认情况下，元素的中心用于确定放置元素的位置。您的 div 没有定义大小，因此它是屏幕的宽度。如果您设法放下它，使该元素的中心位于可放置的位置，您将看到警报。

这个带有背景颜色的 fiddle 说明了这个问题。

http://jsfiddle.net/v6PME/

有了定义的宽度，您将看到您可能正在寻找的功能:

http://jsfiddle.net/v6PME/1/

注意:我假设您已经遗漏了您的 css 并且 #trash div 有一定的大小，因此它可以完全放入。

关于javascript - 简单的 jQuery droppable 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10256519/