jquery droppable 不工作答案

【问题标题】：jquery droppable is not workingjquery droppable 不工作
【发布时间】：2014-09-22 08:32:52
【问题描述】：

伙计们。我花了几个小时来检查我的 jquery，为什么它不能正常工作。只是困惑为什么当方形 div 放入盒子的 div 时，可放置功能不会触发警报。

这是我的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>

这是我的风格

#box {
    margin: 0 auto;
    background: #ecf0f1;
    border-radius: 10px;
    border-style: dashed;
    height: 100px;
    width: 100px;
}
#square {
    margin: 0 auto;
    background: #3498db;
    border-radius: 10px;
    height: 100px;
    width: 100px;
}

这是我的 javascript

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

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

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

});

任何帮助将不胜感激。谢谢！

【问题讨论】：

这是我的jsfiddle.net/p0n27hcz/2
你的小提琴在 Firefox 上对我来说很好用。
不，这就是我感到困惑的地方。 Frédéric Hamidi 为什么在 Chrome 上不能正常工作？
在 Firefox 上也适用于我，这似乎是 Chrome 特有的问题。
谢谢你，拉平。是不是有什么错误的功能会导致 Chrome 不能正常运行？

标签： javascript jquery jquery-droppable

【解决方案1】：

使用 droppables tolerance 选项。

“fit”：Draggable 与 droppable 完全重叠。
“相交”：Draggable 在两个方向上至少与 droppable 重叠 50%。
“pointer”：鼠标指针与 droppable 重叠。
“touch”：Draggable 与 droppable 任意重叠。

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

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

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

});

#box {
    margin: 0 auto;
    background: #ecf0f1;
    border-radius: 10px;
    border-style: dashed;
    height: 100px;
    width: 100px;
}
#square {
    margin: 0 auto;
    background: #3498db;
    border-radius: 10px;
    height: 100px;
    width: 100px;
}

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

【讨论】：

哇啊啊啊！非常感谢，施泰利安。现在它适用于 chrome 和 Mozilla。
这实际上不会使方形 div 落在盒子上。相反，您总是需要拖动正方形并将鼠标光标与 div 一起放在盒子上。

【解决方案2】：

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

将按照 SCHTAILian 的解释工作。但这会迫使您将指针保留在 #box div 内，以便可放置的 #square 正确放置在其上。

这是另一种方法小提琴http://jsfiddle.net/naeemshaikh27/p0n27hcz/3/

只需删除

 margin:auto;

【讨论】：