Comment empêcher l'empilement des divs, avec jQuery UI drag & drop ?

Question

Je ne sais pas comment empêcher le dépôt d'un élément lorsqu'il existe déjà un élément déposé dans une position choisie.

J'ai trois éléments div de taille différente et je les fais glisser sur une grille déposable. De la façon dont j'ai fait mon code (voir jsFiddle ci-dessous), je n'arrive pas à trouver un moyen de vérifier s'il y a déjà un élément à cet endroit.

Quelqu'un peut-il trouver une solution, une idée ? JSFiddle : http://jsfiddle.net/sExrV/1/

Je pense que le code doit se trouver quelque part dans l'événement "drop", mais je ne vois pas comment le tester :

$("#grid").droppable({
    accept: (".widget1, .widget2, .widget3"),
    drop: function(event, ui) {
    // test for existing element dropped here??

Answer 1

Avez-vous essayé de désactiver la fonctionnalité "droppable" à chaque fois qu'un objet est déposé ?

$("#grid").droppable({
    drop: function() { $( "#grid" ).droppable( "option", "disabled", true ); }
});