Javascript jquery droppable不工作_Javascript_Jquery_Jquery Droppable

Javascript jquery droppable不工作

javascript jquery

Javascript jquery droppable不工作,javascript,jquery,jquery-droppable,Javascript,Jquery,Jquery Droppable,伙计们。我花了几个小时来检查我的jquery，为什么它不能很好地工作。只是不明白为什么当方形div掉到box的div中时，droppable函数不触发警报这是我的html <html> <head> <title>jquery - draggable </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script typ

伙计们。我花了几个小时来检查我的jquery，为什么它不能很好地工作。只是不明白为什么当方形div掉到box的div中时，droppable函数不触发警报

这是我的html

<html>
<head>
<title>jquery - draggable </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

    <script src="js/javascript.js"></script>
</head>
<body>
<div class="container">
    <div id="square"></div>
    <br>        
    <div id="box"></div>
</div>
</body>
</html>

这是我的javascript

$(document).ready(function(){
    $("#square").draggable();

    $("#box").droppable({
        drop: handleDropEvent
    });

    function handleDropEvent(event, ui){
        alert('Hello');
    }

});

任何帮助都将不胜感激。谢谢大家!

使用下拉式

容差选项

“适合”：可拖动与可拖放完全重叠
“相交”：可拖动在两个方向上与可拖放重叠至少50%
“指针”：鼠标指针与可拖放对象重叠
“触摸”：可拖动与可拖放重叠任意数量


$（文档）.ready（函数（）{
$（“#square”）.draggable（）；
$（“#盒”）。可拖放({
下降：扶手缆绳通风，
公差：“指针”
});
函数handleDropEvent（事件，ui）{
警惕（“你好”）；
}
});
#框{
保证金：0自动；
背景#ecf0f1；
边界半径：10px；
边框样式：虚线；
高度：100px；
宽度：100px；
}
#方格{
保证金：0自动；
背景：#3498db；
边界半径：10px；
高度：100px；
宽度：100px；
}

jquery-可拖动



正如Schtalian所解释的那样。
但这将迫使您将指针保持在#框
div内，以便将可拖放的#正方形
正确地放置在其上
这是另一种方法
只需移除
 margin:auto;

这是我的，你的小提琴在Firefox上对我来说很好。不，这就是我困惑的地方。为什么在Chrome上不能很好地工作，Frédéric Hamidi？在Firefox上对我也很有效，这似乎是Chrome特有的问题。谢谢你，lapin。是否有任何错误的功能会使Chrome无法正常工作？哇！非常感谢你，施泰利安。现在，chrome和mozilla都在工作。这实际上不会让方形div落到盒子上。相反，您总是需要拖动正方形并将鼠标光标连同div一起放在长方体上。
 $("#box").droppable({
        drop: handleDropEvent,
        tolerance:"pointer"
    });

 margin:auto;