jQuery faites glisser et déposez - la vérification d'une baisse de l'extérieur d'un droppable

Je vois que vous avez déjà eu une réponse, et de toute façon j'ai eu ce même problème aujourd'hui et je l'ai résolu de cette façon:

var outside = 0;

//this one control if the draggable is outside the droppable area
$('#droppable').droppable({
    accept      : '.draggable',
    out         : function(){
        outside = 1;
    },
    over        : function(){
        outside = 0;
    }
});

//this one control if the draggable is dropped
$('body').droppable({
    accept      : '.draggable',
    drop        : function(event, ui){
        if(outside == 1){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});

J'en avais besoin parce que je ne pouvais pas modifier les options de mon draggables, j'ai donc dû travailler uniquement avec les droppables (j'en avais besoin à l'intérieur de l'impressionnant FullCalendar plugin).
Je suppose qu'il pourrait avoir quelques problèmes à l'aide de la "gourmand" option de les droppables, mais il devrait fonctionner dans la plupart des cas.

PS: désolé pour mon mauvais anglais.

EDIT: Comme suggéré, j'ai créé la version à l'aide de jQuery.de données; il peut être trouvé ici : jsfiddle.net/Polmonite/WZma9/

De toute façon jQuery.la documentation des données de dire:

Noter que cette méthode ne prévoit pas actuellement de la croix-plate-forme de soutien pour établir des données sur des documents XML, comme Internet Explorer ne permet pas de données pour être connectés via expando propriétés.

(ce qui signifie qu'il ne fonctionne pas sur IE avant le 8)

EDIT 2: Comme le fait remarquer @Darin Peterson , le code précédent ne fonctionne pas avec plus d'une goutte de la zone, ce qui devrait résoudre ce problème: http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: Exemple de MODIFIER 2 a un bug. Si je fais glisser un "Glisser-moi!" à bas droppable, puis déposer par "Glisser-moi aussi" à la partie supérieure du drop, puis déposer "Glisser moi aussi" à l'extérieur, il alerte "est Tombée à l'intérieur!" Donc, ne l'utilisez pas.

EDIT 4: Comme indiqué par @Alex Gor, l'exemple de Modifier 2 était faux; en fait, c'était plus un exemple pour expliquer comment faire une boucle par tous les draggables/les droppables, mais j'ai effectivement oublié de supprimer les messages d'alerte, de sorte qu'il était assez déroutant. Ici la mise à jour du violon.

L'avantage de l'exemple suivant, c'est que vous n'avez pas besoin de changer ou de connaître la droppable code:

De selection de revenir propriété peut avoir une fonction(valeur){}. Une valeur est passée en argument, en indiquant si l'aide a été de tomber sur un élément (la chute de l'élément), ou 'false' si pas de tomber sur un élément (baisse de l'extérieur et n'est pas acceptée).

Remarque: vous devez renvoyer la bonne valeur booléenne à partir de ce
revert-fonction, afin de dire à cette personne de revenir ou pas
(vrai/faux). True signifie que oui, prendre l'aide de retour à son origine
position, en le déplaçant dans un mouvement lent (out-of-the-box). Des moyens de faux pas, juste
suppression de l'aide abdruptly. Réglage de la rétablir propriété 'invalide',
est un raccourci de dire

• "oui, en cas de chute à l'extérieur, puis revenir helper'
• "non, en cas de chute sur un drop élément et accepté, puis tuer le helper droit away'.

Ma conjecture est que vous pouvez ajouter actuel de l'interface utilisateur de l'aide pour déplaçable conteneur avec des données de propriété lors de l'événement de démarrage. Puis le ramasser dans le revert de la fonction de la propriété data. Puis ajouter une propriété à l'aide, en indiquant s'il est tombé ou pas. Puis, finalement, dans l'événement d'arrêt, vérifier ces données, la valeur de la propriété, et de faire ce que vous avez prévu.

Afin d'événement/les appels de fonction pour déplaçable:
start-revenir-stop

Ce qui pourrait être un exemple:

jQuery('#draggable').draggable(
{
    start: function(event, ui) {
        $(this).data('uihelper', ui.helper);
    },
    revert: function(value){
        var uiHelper = (this).data('uihelper');
        uiHelper.data('dropped', value !== false);
        if(value === false){
             return true;
        }
        return false;
    },
    stop: function(event, ui)
    {
        if(ui.helper.data('dropped') === true){
            //handle accordingly...
        }
    }
});

Vous pouvez même retourner la valeur true dans le revert de la fonction, et il suffit de retirer le helper au cours de l'événement d'arrêt au lieu de cela, selon les données de('abandonné') de la valeur avec de l'interface utilisateur.helper.supprimer(). Ou vous pouvez même exploser avec CSS3 si vous avez encore une mauvaise journée 😉

Une vieille question, et le vieux répond à dire que cette "pourraient" être une nouvelle solution. Vous avez peut-être aussi voulu, que la question des états, de savoir SI un bien a été abandonné à l'extérieur d'un drop. Pour moi, dans au moins 95% des cas, je n'ai pas vraiment soin SI, tout simplement je veux que les choses vont revenir à la façon dont ils ont été sans d'éventuelles modifications LORSQUE cela se produit.

Réglage revert de la chaîne invalid accomplit le comportement désiré sans aucun code supplémentaire ou funky choses à faire.

$( '#draggable' ).draggable({
    revert: "invalid",
    stop: function( event, ui )
    {
       //whatever
    }
});

De nouveau, ça ne vous dit pas "s'il a été abandonné à l'extérieur d'un droppable," mais il faudra revenir à l'état initial si cela arrive.