Drag & Drop (jquery-ui): Ich bräucht' mal ein Event

[para_noid]

Tach auch,

Folgendes: ich verwende jQuery-UI für ein kleines Item-Slot-System.

Angenommen, ich habe zehn leere Slots und drei Items, die ich je nach Laune innerhalb der Slots herumschieben kann.

<div class="slot ui-droppable">
  <div class="item yellowPo ui-draggable" style="position: relative;"></div>
  </div>
<div class="slot ui-droppable">
  <div class="item bluePo ui-draggable" style="position: relative;"></div>
  </div>
<div class="slot ui-droppable">
  <div class="item greenPo ui-draggable" style="position: relative;"></div>
  </div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>
<div class="slot ui-droppable"></div>

function initInventory() {
  $('.item').draggable({
     cursor: 'move',
     containment: 'document',
     revert: 'invalid',
     stack: '.item'
	});
  $('.slot').droppable({
     accept: '.item',
     hoverClass: 'hovered',
     drop: handleDropEvent
  });
}

function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
	if($(draggable).hasClass("item")){
		draggable.position({of: $(this), at: 'center center'});
	}
}

Jetzt möchte ich verhindern, dass ich in einen Slot mehr als ein Item legen kann, und ich weiß nicht, wie. Mit dem geposteten Code kann ich alle drei Items übereinander in einen Slot legen.

Ich kann zwar den verwendeten Slot für weitere Ablagen deaktivieren:

function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
	if($(draggable).hasClass("item")){
		draggable.position({of: $(this), at: 'center center'});
		$(this).droppable({disabled: true});
	}
}

aber finde keine Möglichkeit, ihn zu reaktivieren, wenn er wieder frei ist. Ein einmal benutzter Slot wird danach unbrauchbar. Wohin also mit einem

$(this).droppable({disabled: false});

?
Ich bräuchte eine Art gedropptes-Item-wurde-soeben-von-mir-entfernt-Event für die Slots.


Jemand eine Idee?

 

[Joe]

Also ich geb zu ich hab wirklich wenig Verständniss für Javascript bisher (Habs bisher meist mit PHP lösen können).
Ich würde auf den ersten Blick an ein else denken.

function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
    if($(draggable).hasClass("item")){
        draggable.position({of: $(this), at: 'center center'});
        $(this).droppable({disabled: true});
    }
    else {
        draggable.position({of: $(this), at: 'center center'});
        $(this).droppable({disabled: false});
    }
}

Wenn das Unsinn ist dann einfach ignorieren

 

[para_noid]

Wenn das Unsinn ist dann einfach ignorieren

Unsinn nicht, aber es funktioniert nicht
Das Drop-Event wird ja bei jeder Ablage ausgelöst. Und abgelegt wird immer ein Element der Klasse item. Der else-Zweig würde also gar nicht durchlaufen.

Ich brauche also entweder ein Event für die Droppables, dass beim Entfernen eines Draggebels feuert, oder eines für die Draggables, das beim oder nach dem erneuten Platzieren feuert.
Das ständige Durchrödeln durch eine Schleife würd ich dabei gern vermeiden, sonst wärs' kein Problem.