Jquery UI - ドロップ可能なラッパーの中のDroppableブロック

Question

私は本当に立ち往生しています。私は、ドロップ可能なラッパーの中のドロップ可能なdivにjQuery UIブロックをドラッグできるようにしたい。

ブロックがドロップされている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/

Answer 1

あなたはすべてのdivのための共通機能をtrigerする必要があります。例：貪欲：ソリューションが見つかり

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


}