4

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>
4

3 回答 3

9

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

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

http://jsfiddle.net/v6PME/

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

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

注意：我假设您已经省略了 css，并且#trashdiv 有一些大小，因此可以完全放入。

于 2012-04-21T05:40:15.760 回答
3

詹姆斯蒙塔涅的回答是正确的。特别是它不起作用的原因（谢谢！）。

tolerance但是，我认为更好的解决方案是通过将droppable设置为来增加 drop precition pointer。

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

于 2018-03-01T12:01:25.410 回答
0

它似乎失败了，因为您的可放置 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>
于 2012-04-21T05:40:31.550 回答