jquery droppable is not working

Question

Guys. I spent few hours just for checking my jquery, why it doesn't work well. Just confused why droppable function doesn't firing alert when the square div has dropped into box's div.

Here is my 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>

And this is my style

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

And this is my javascript

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

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

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

});

Any help would be appreciated. Thank you!

Nah, that's what i am confused about. Why on Chrome it doesn't work well, Frédéric Hamidi? — Sonic Master, Sep 22 '14 at 08:39
Works for me on Firefox as well, it seems to be a Chrome specific problem. — lapin, Sep 22 '14 at 08:39
Thank you, lapin. Is there any wrong function that can make Chrome doesn't work well? — Sonic Master, Sep 22 '14 at 08:45

score 2 · Accepted Answer · answered Sep 22 '14 at 08:41

Play with droppables tolerance option.

"fit": Draggable overlaps the droppable entirely.
"intersect": Draggable overlaps the droppable at least 50% in both directions.
"pointer": Mouse pointer overlaps the droppable.
"touch": Draggable overlaps the droppable any amount.

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

Whoaaaaa! Thank you so much, Schtailian. Now it's work both of chrome and mozilla. — Sonic Master, Sep 22 '14 at 08:47
this would not actually make the square div drop on the box. Rather, you would always require to drag the square and drop the mouse cursor along with div on the box. — Naeem Shaikh, Sep 22 '14 at 08:54

score 1 · Answer 2 · answered Sep 22 '14 at 08:59

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

would work as explained by SCHTAILian. But this would force you to keep your pointer inside the #box div so the droppable #square would bee dropped correctly on it.

here is Another approach fiddle http://jsfiddle.net/naeemshaikh27/p0n27hcz/3/

just remove the

 margin:auto;

jquery droppable is not working

2 Answers2