2010-03-13 2 views
0

i en utilisant jquery et jquery-ui,comment faire la div rouge ne signale pas 'ss' quand faites glisser le div noir sur elle,

voici mon 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> 

Répondre

0

La solution est d'inclure la div rouge à l'intérieur du div bleu dans la hiérarchie DOM. Et puis placez la droppable de la div rouge à avide. Consultez la documentation sur le droppable plugin

Si cela est vrai, empêchera la propagation d'événement sur droppables imbriquées.

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