1

伙计们。我花了几个小时来检查我的 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');
    }

});

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

4

2 回答 2

2

玩 droppablestolerance选项。

  • "fit": Draggable 与 droppable 完全重叠。
  • "intersect": 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>

于 2014-09-22T08:41:43.217 回答
1 
 $("#box").droppable({
        drop: handleDropEvent,
        tolerance:"pointer"
    });

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

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

只需删除

 margin:auto;
于 2014-09-22T08:59:25.847 回答