CODEWITHSUNDEEP
javascriptjqueryjquery-droppable
Sonic Master
Sonic Master

Reputation: 1246

jquery droppable is not working

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!

Upvotes: 1

Views: 2457

Answers (2)

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

 $("#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;

Upvotes: 1

SCHTAILian
SCHTAILian

Reputation: 448

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>

Upvotes: 2

Related Questions