Question

专家。我花了几个小时来检查我的jquery，为什么它不能正常工作。只是混淆了为什么当方形div掉入盒子的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>

这是我的风格

#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');
    }

});

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

Answer 1

使用droppables tolerance选项进行游戏。

“fit”：Draggable完全覆盖了droppable。
“intersect”：Draggable在两个方向上至少重叠50％的droppable。
“pointer”：鼠标指针与droppable重叠。
“touch”：可拖动任意数量的可拖放重叠。

$(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>

Answer 2

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

将按照SCHTAILian的解释工作。但是这会强制您将指针放在#box div中，以便可以在其上正确删除droppable #square。

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

只需删除

即可

 margin:auto;

jquery droppable无效

2 个答案: