jau, mir gehts halt nur darum dass ich mich versichere, dass ich es richtig verstanden habe 
das "nichts mehr reinschieben" hab ich bereits hinbekommen.
aktuell fehlt mir noch das zurück an den platz vom rausschieben, dazu hab ich auch schon ne idee, muss das aber erst testen
kann/konnte heut leider net den ganzen tag scripten und hatte selber bisher erst eine begegnung mit drag n drop. wenn ich gleich zeit hab, schick ich dir den externen link zu meiner lokalen entwicklung per pn. dann kannste schon nen sneak preview haben
edit:
das hier wäre dann eine lösung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel der Webseite</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function(){
var base = $('#dragbase');
var drags = $('#dragbase > div.draggable');
function resetDropBase(lasttarget){
if(typeof(lasttarget) != 'undefined'){
if(lasttarget.attr('id') != 'dragbase'){
lasttarget
.find( "p" )
.html( "Dropzone" );
lasttarget
.removeClass( "droppable1" )
.addClass( "droppable" )
.data('has_child', false)
.droppable( "option", "accept", '*' )
;
}
}
}
for(var i=0; i< drags.length; i++){
var aktDrag = $(drags[i]);
aktDrag.data({
'position': aktDrag.offset,
'revert' : false
});
}
base.css({
height : base.height(),
width : base.width()
}).droppable({
drop : function (event, ui) {
resetDropBase(ui.draggable.data('lasttarget'));
ui.draggable.data('lasttarget' , $(this));
}
});
$( "#droppable, #droppable1" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop : function (event, ui) {
//allowdrop ist steuervariable, ob ein element gedropped werden darf oder nicht, initial wird dropping erlaubt
var allowDrop = true;
//hasChild bestimmt, ob bereits etwas in der dropzone ist, initial ist es undefined
var hasChild = $(this).data('has_child');
//prüfen ob has_child überhaupt vorhanden ist
//wenn ja weitere prüfung auf den darin liegenden wert
if(typeof(hasChild) != 'undefined'){
if(hasChild === true){
//ist haschild auf true, wurde bereits was ins feld gelegt und wir stellen die
//steuervariable auf false, damit nix passieren kann.
allowDrop = false;
}
}
if(allowDrop === true){
//hier deine "alte droplogik"
$( this )
.removeClass( "droppable" )
.addClass( "droppable1" )
.find( "p" )
.html( "geladen" );
//erweitert um das befüllen unserer inhalte haschild und child, danach deaktivieren
$( this )
.data('has_child', true)
.droppable( "option", "accept", ui.draggable )
;
resetDropBase(ui.draggable.data('lasttarget'));
ui.draggable.data('lasttarget' , $(this));
}else{
//wenn nen kind vorhanden, wird das event direkt gestoppt
event.preventDefault();
event.stopPropagation();
return false;
}
}
});
$( "#draggable" ) .draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner"});
$( "#draggable1" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner"});
})
</script>
<style>
.droppable{
width: 900px;
height: 200px;
background-color: red;
}
.droppable1{
width: 500px;
height: 200px;
background-color: yellow;
}
.draggable{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id='droppable' class='droppable'>
<p>Dropzone</p>
</div>
<div id='droppable1' class='droppable'>
<p>Dropzone</p>
</div>
<div id="dragbase">
<div id='draggable' class='draggable'>
<p>Drag</p>
</div>
<div id='draggable1' class='draggable'>
<p>Drag</p>
</div>
</div>
</body>
</html>
Alles anzeigen
es geht mit sicherheit noch ne ecke hübscher und eigentlich wäre sowas ein fall für ein ganzes plugin, wo man dann die drags und drops drin kapselt und ggf noch eigene im namespace globalisierte variablen nutzen kann etc pp...
aber ich hoffe das hier reicht erstmal 
