jQuery UI - événement 'snap' déplaçable

La draggable widget ne pas exposer un tel événement hors de la boîte (encore). Vous pouvez modifier et maintenir votre version personnalisée ou, mieux, d'en dériver un nouveau widget à partir d'elle et de mettre en œuvre la nouvelle de l'événement. Cependant, il existe une troisième voie.

De cette questionnous savons que le widget stocke un tableau de la "potentiellement snappable" des éléments en sa snapElements de la propriété. À son tour, chaque élément de ce tableau expose un snapping propriété qui est true si le déplaçable helper est actuellement ancré à cet élément et false autrement (l'aide peut aligner plusieurs éléments en même temps).

La snapElements tableau est mis à jour pour chaque drag de l'événement, de sorte qu'il est toujours up-to-date dans drag gestionnaires. À partir de là, nous n'avons qu'à obtenir le draggable widget instance de l'élément associé avec de données()et appeler sa _trigger() méthode pour élever nos propres snapped de l'événement (en fait dragsnapped sous le capot). En passant, nous pouvons $.étendre() la ui objet avec un objet jQuery emballage ancré élément:

$(".drag").draggable({
    drag: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            if (element.snapping) {
                draggable._trigger("snapped", event, $.extend({}, ui, {
                    snapElement: $(element.item)
                }));
            }
        });
    },
    snap: ".grid",
    snapped: function(event, ui) {
        //Do something with 'ui.snapElement'...
    }
});

Le code ci-dessus, cependant, peut encore être améliorée. Comme il est, un snapped événement sera déclenché pour chaque drag événement (qui se produit beaucoup) tant que le déplaçable helper reste ancré à un élément. En outre, aucun événement est déclenché lors de l'accrochage des extrémités, ce qui n'est pas très pratique, et freine la convention pour de tels événements se produisent par paires (snapped-insnapped-out).

Heureusement, la snapElements tableau est persistant, de sorte que nous pouvons l'utiliser pour stocker l'état. On peut ajouter un snappingKnown propriété pour chaque élément du tableau, afin de s'assurer que nous avons déjà déclenché une snapped événement de cet élément. En outre, nous pouvons l'utiliser pour détecter qu'un élément a été cassé depuis le dernier appel et de réagir en conséquence.

Note que, plutôt que de l'introduction d'un autre snapped-out cas, le code ci-dessous choisit de passer un supplémentaire snapping de la propriété (à l'image de l'élément de l'état actuel) dans la ui objet (qui est, bien sûr, qu'une question de préférence):

$(".drag").draggable({
    drag: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            ui = $.extend({}, ui, {
                snapElement: $(element.item),
                snapping: element.snapping
            });
            if (element.snapping) {
                if (!element.snappingKnown) {
                    element.snappingKnown = true;
                    draggable._trigger("snapped", event, ui);
                }
            } else if (element.snappingKnown) {
                element.snappingKnown = false;
                draggable._trigger("snapped", event, ui);
            }
        });
    },
    snap: ".grid",
    snapped: function(event, ui) {
        //Do something with 'ui.snapElement' and 'ui.snapping'...
        var snapper  = ui.snapElement.attr("id"),snapperPos = ui.snapElement.position(),
            snappee  = ui.helper.attr("id"),     snappeePos = ui.helper.position(),
            snapping = ui.snapping;
        //...
    }
});

Vous pouvez tester cette solution ici.

En clôture, une autre amélioration pourrait être de rendre les snapped événement annulablecomme le drag événement. Pour y parvenir, nous devons retourner false de notre drag gestionnaire si l'un des appels à _trigger() retourne false. Vous souhaitez peut-être réfléchir à deux fois avant de mettre en œuvre ce, même si, comme l'annulation d'une opération de glisser sur snap-in ou snap-out ne ressemble pas à un utilisateur très intuitive dans le cas général.

Mise à jour: à Partir de l'INTERFACE utilisateur de jQuery 1.9 partir, le data() devient le widget du nom complet, avec des points remplacés par des tirets. En conséquence, le code utilisé ci-dessus pour obtenir le widget exemple devient:

var draggable = $(this).data("ui-draggable");

Au lieu de:

var draggable = $(this).data("draggable");

En utilisant le nom non qualifié est toujours pris en charge dans 1,9 mais est obsolète, et le soutien seront déposés en 1.10.