Home/ Questions/Q 666811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:51:36+00:00

i using jquery and jquery-ui, this is my code: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML

  • 0

i using jquery and jquery-ui,

this is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
</head> 
    <body>
        <style type="text/css" media="screen"> 

        </style>

        <div id=a style="width:300px;height:300px;background:blue;position:absolute;"></div>
        <div id=b style="width:100px;height:100px;background:red;position:absolute;"></div>
        <div id=c style="width:50px;height:50px;background:black;clear:both"></div>
        <script src="jquery-1.4.2.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8"> 
$("#c").draggable({});
$("#b").droppable('disable');//this is not useful

$("#a").droppable({
drop: function(event,ui) {
    alert('ss')
    }
});
        </script> 

    </body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The solution is to include the red div inside the blue div in the DOM hierarchy. And then set the droppable of the red div to greedy. Check the documentation on the droppable plugin

    If true, will prevent event
    propagation on nested droppables.

    $("#c").draggable();
$("#b").droppable({greedy: true});
$("#a").droppable({
  drop: function(event,ui) {
    alert('ss');
  }
});

<div id="a" style="width:300px;height:300px;background:blue;position:absolute;z-index:180">
  <div id="b" style="width:100px;height:100px;background:red;position:absolute;z-index:200"></div>
</div>
<div id="c" style="width:50px;height:50px;background:black;clear:both;z-index:220"></div>
    • 0