简单的jQuery可丢弃不起作用

Simple jQuery droppable not working

本文关键字：不起作用 jQuery 简单      更新时间：2023-09-26

可拖动在这里工作，但是当我将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没有定义的大小，因此它是屏幕的宽度。 如果您设法将其拖放，以便此元素的中心位于可放置对象中，您将看到警报。

这个带有背景颜色的小提琴说明了这个问题。

http://jsfiddle.net/v6PME/

通过定义的宽度，您将看到您可能正在寻找的功能：

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

注意：我假设您省略了 css，并且 #trashdiv 具有一定的大小，因此可以将其放入。

詹姆斯·蒙塔涅的回答是正确的。尤其是它不起作用的原因（谢谢！

然而，在我看来，更好的解决方案是通过将可下降tolerance设置为 pointer 来增加下降精度。

http://jsfiddle.net/org1b75t/2/

它似乎失败了，因为您的可放置div 似乎没有任何宽度，因此您不可能在那里放置任何东西。我以您的示例为例并对其进行了轻微修改，我能够使其工作：

<html>
<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">DROP HERE</div>

        </body>
        </html>
相关文章：