Jquery UI - Dropbare Block in abwerfbaren Wrapper - jquery, jquery-ui, jquery-ui-ziehbare

Ich bin wirklich festgefahren. Ich möchte in der Lage sein, einen jQuery-UI-Block in einem droppbaren Div in einen droppbaren Wrapper zu ziehen.

Ich muss die ID des Div erhalten, wo der Block fallen gelassen wird.

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

JSFidel: http://jsfiddle.net/J7azG/23/

Antworten:

Sie müssen eine gemeinsame Funktion für alle Div. Ex:

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


}