2010-03-13 39 views
0

我使用jQuery和jQuery UI的,如何使當其拖動黑色格紅格不提醒「SS」,

這是我的代碼:

<!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> 

回答

0

解決方案是在DOM層次結構中將紅色div包含在藍色div中。然後設置紅色div的貪婪。檢查的droppable plugin

如果爲true的文檔,將阻止事件嵌套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>