Jquery UI - Droppable塊內可以droppable包裝

我真的卡住了。我希望能夠在可拖放的包裝器內拖放一個可拖放div的jQuery UI塊。Jquery UI - Droppable塊內可以droppable包裝

我需要得到該塊所在的div的id。

JS：

$(".wrapper").droppable({ 

      drop: function(event, ui) { 
       alert('dropped in the wrapper'); 
      } 

     }); 
$(".inside").droppable({ 

      drop: function(event, ui) { 
       alert('dropped inside'); 
      } 

     }); 
$(".outSide").droppable({ 

      drop: function(event, ui) { 
       alert('dropped OutSide'); 
      } 

     }); 
$(".block").draggable();

CSS：

.wrapper { 
    width:200px; 
    height:250px; 
    background-color:#0f0; 
    text-align:center; 
    line-height:200px; 
    vertical-align:middle; 
} 

.inside { 
    display:inline-block; 
    vertical-align:middle; 
    width:100px; 
    height:110px; 
    border:1px solid #000; 

} 
.outSide { 
    display:inline-block; 
    width:100px; 
    height:200px; 
    position:relative; 
    float:left; 
    left:240px; 
    top:40px; 
    border:1px solid #000; 

} 

.block { 
    width:80px; 
    height:30px; 
    background-color:#00f; 
    display:inline-block; 
}

HTML：

<div class="wrapper"> 
    Wrapper 
    <div class="inside"> 
     Inside 
    </div> 
</div> 
     <div class="outSide"> 
     Outside 
    </div> 
<br /><br /> 

     <div class="block"></div> 

<br /><br />

的jsfiddle：http://jsfiddle.net/J7azG/23/

來源

2011-11-11 v1r00z

找到了解決辦法：貪婪：真 – v1r00z

發佈的解決方案，這樣，如果有人在這裏捲起他們可以從你身上學到什麼好處。 – PseudoNinja

將greedy選項設置爲true。 http://jsfiddle.net/J7azG/40/ – v1r00z

你需要通過靶向一個常用功能的所有股利。例如：

$(".wrapper").droppable({ 
      drop: handleDrop 
     }); 
$(".inside").droppable({ 

      drop: handleDrop 

     }); 
$(".outSide").droppable({ 

      drop:handleDrop 

     }); 
$(".block").draggable(); 

function handleDrop(event,ui) 
{ 
    switch $(this).attr("id"){ 
    case "...": break; 
    case "....": break; 
    default: break; 
} 


}

來源

2015-05-02 06:53:13

Jquery UI - Droppable塊內可以droppable包裝

回答

相關問題