jQuery: Comment empêcher un assistant d'être supprimé s'il n'a pas été supprimé avec succès

Question

J'ai un déplaçable avec un assistant . Parfois, l'assistant est un clone et parfois, c'est l'élément d'origine.

Le problème est que lorsque l'assistant est l'élément d'origine et qu'il n'est pas déposé sur une liste de dépôt valide, il est supprimé. Ma solution ressemble à ceci jusqu'à présent:

dans mon rappel on_dropped , je règle ui.helper.dropped_on_droppable sur true ;

Dans le rappel stop du déplaçable, je vérifie la présence de cette variable, puis ... que dois-je faire?

$('.my_draggable').draggable({
    stop   : function(e, ui) {
        if (!ui.helper.dropped_on_droppable) {
            /* what do I do here? */
        }
    },

Est-ce même la bonne approche?

Answer 1

Ok, j'ai trouvé une solution! C'est moche et ça enfreint les «règles d'encapsulation», mais au moins ça fait le travail.

N'oubliez pas que ce n'est que pour des cas particuliers ! jQuery peut très bien gérer son propre enlèvement d'assistance. Dans mon cas, j'avais un assistant qui était parfois l'élément d'origine et parfois un clone; il n'était donc pas toujours approprié de le supprimer après la restauration.

element.draggable({
    stop   : function(e, ui) {
        /* "dropped_on_droppable" is custom and set in my custom drop method
           ".moved_draggable" is custom and set in my custom drag method, 
                     to differentiate between the two types of draggables
        */               
        if (!ui.helper.dropped_on_droppable & ui.helper.hasClass('moved_draggable')) {
            /* this is the big hack that breaks encapsulation */
            $.ui.ddmanager.current.cancelHelperRemoval = true;
        }
    },

Attention: cela rompt l’encapsulation et risque de ne pas être compatible avec les transferts

Answer 2

Je manque peut-être quelque chose ici, mais ne s'agit-il pas simplement d'ajouter

revert: "invalid"

aux options de la glissable si la glissable est un élément d'origine, pas un clone?

Answer 3

J'utilise un assistant personnalisé qui regroupe des objets déplaçables à sélection multiple dans un seul div. Cela ne semble pas correspondre à la fonctionnalité de retour, alors je suis venu avec ce schéma. Les éléments sont ajoutés manuellement au parent d'origine que je garde via .data ().

.draggable({
    helper: function() {
        var div = $(document.createElement('div'))
            .data('lastParent', $(this).parent());
        return div;
    },
    start: function() {
        //... add multiple selection items to the helper..          
    },
    stop: function(event,ui) {
        $( $(ui.helper).data('lastParent') ).append( $(ui.helper).children() );
    }
}

Cette approche perd de la jolie animation, mais elle peut être utile pour vous ou pour quelqu'un d'autre avec ce problème.