jQuery sortable obtenir 2 éléments échangés

Je ne trouve pas comment obtenir l'élément de destination avec jQuery UI sortable.

    $("#pages").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var first = ui.item; //First element to swap
            var second = ???? //Second element to swap
            swapOnServer(first, second);
        }
    });

Toutes les options que j'ai essayé de pointer vers l'élément glissé, mais pas le seul, il est échangé avec: ui.item[0], event.srcElement, event.toElement.

En outre, this points à la LISTE (OL) de l'élément.

Disant deuxième je veux dire suivantes:

Ordre Original:

| 0 | 1 | 2 | 3 |

Nous faites glisser l'élément 1 et déposez-le dans la position 3. Qui va se retrouver avec:

| 0 | 3 | 2 | 1 |

Ainsi, le premier élément est 1 et la deuxième est de 3 (FAUX! Voir ci-dessous).

Mise à JOUR: j'ai réalisé que je l'ai eu tort. L'ordre nouveau dans ce cas.

| 0 | 2 | 3 | 1 |

Suite à ma question n'a pas vraiment de sens. Merci à tous pour l'aide. Je vais marque de vote et de marquer une réponse.

La question est donc comment faire pour obtenir le deuxième élément ici?

LA SOLUTION ACTUELLE (comme il n'y a pas de terme comme permutation dans triable) est ci-dessous. Il utilise le tableau temporaire avec les commandes.

    var prevPagesOrder = [];
    $("#pages").sortable({
        start: function(event, ui) {
            prevPagesOrder = $(this).sortable('toArray');
        },
        update: function(event, ui) {
            var currentOrder = $(this).sortable('toArray');
            var first = ui.item[0].id;
            var second = currentOrder[prevPagesOrder.indexOf(first)];
            swapOnServer(first, second);
        }
    });

Merci,
Dmitriy.

il n'y a pas de "deuxième point" donc, il rend votre question extrêmement floue. Si vous permettant à un utilisateur de prendre et de déposer un élément n'importe où dans la liste, il est simplement en déplaçant l'index pour faire de la place. Seulement si, il le déplace d'un endroit vers le haut ou vers le bas, ne sont que deux des éléments touchés. Mais si il la prend par le haut de la liste, et il tombe après le prochain de trois éléments, ces trois premiers éléments de position sont toutes affectées par le déplacement. Pas de "switch" a eu lieu. Veuillez décrire plus en détail ce que vous avez besoin pour accomplir.
Comment est la swapOnServer méthode?
essayé la solution, semble cette ligne: var second = currentOrder[prevPagesOrder.indexOf(first)]; devrait être var second =prevPagesOrder[currentOrder.indexOf(first)];

OriginalL'auteur Dmytrii Nagirniak | 2010-02-15

5

Il n'y a pas vraiment une "deuxième" élément en soi. Vous avez un article, et vous êtes tout simplement de le placer dans un autre endroit. Les éléments autour de lui ajuster leurs positions en conséquence. Si vous souhaitez obtenir un tableau de tous les éléments, vous pouvez utiliser le toArray méthode.

OriginalL'auteur Raul Agrait
6

Essayez d'utiliser le sérialiser fonction qui vous donne une table de hachage de la liste des éléments dans l'ordre.

Si vous avez juste besoin de cet article que le nouveau point d'aller supprimée avant que vous pouvez faire ceci:
```
$("#pages").sortable({
    opacity: 0.6,
    update: function(event, ui) {
        var first = ui.item; //First element to swap
        var second = ui.item.prev();
        swapOnServer(first, second);
    }
});
```
deuxième sera nulle si son au début de la liste.

Il n'y a pas beaucoup que je peux faire avec l'ensemble de la liste. J'ai seulement besoin de 2 éléments qui a été échangé afin que je puisse poster le changement de serveur. Je n'ai pas besoin de poster sur le serveur de l'ensemble de la liste permutation de 2 seulement.
Je pense que Dmitriy fait référence à jQuery UI Sortable, vous faites allusion à l'élément de l'Interface sortable.
ui.item.prev() est MAL. Il sera de retour de l'élément précédent. J'ai besoin d'obtenir le second élément étant inversés. Il n'y a pas quelque chose qui dit que ça sera la précédente.
il n'y a pas une telle chose comme étant "changer" vous laissez tomber quelque chose dans le milieu de la liste. Vous pouvez soit envoyer la liste complète dans sa nouvelle forme, ou de renvoyer l'élément qui est en avant et/ou après avoir dans sa nouvelle place. Vous n'êtes pas la permutation de quoi que ce soit.
merci beaucoup pour l'aide. Je viens de réalisé que je l'ai eu tort. Il n'y a vraiment aucune une telle chose comme "permutation" et je les ai utiliser l'ensemble de la liste. Mise à jour de la question de réfléchir et voter votre réponse.

OriginalL'auteur PetersenDidIt
6

prendre un coup d'oeil à la "Swapable" plugin jQuery:

http://plugins.jquery.com/project/Swapable

- Il semblable à "Sortable", mais seulement de deux éléments du groupe sélectionné sont touchés: élément traîné et a déposé un qui sont échangés. Tous les autres éléments restent à leurs positions actuelles. Ce plugin est basé sur de l'existant "Sortable" plugin jQuery et hérite de toutes sortable options.

c'est la meilleure! Je tiens à souligner à quiconque essaie de mettre à jour leur code de sortable à remplaçables à chaud qu'il est TRÈS IMPORTANT que vous pouvez définir les éléments que vous souhaitez faire glisser ET de façon explicite que la position du curseur est au-delà des limites de votre élément traîné, comme suit: $('#my-list').swappable({items: 'li', cursorAt: {top:-10}}); sinon ça ne marche pas
Mais il suce que vous devez installer un autre plugin

OriginalL'auteur vadimk

Vous pouvez utiliser draggable et droppable au lieu de sortable pour atteindre remplaçables à chaud effet. Dans la pratique, cela va ressembler à ceci:

(function() {
    var droppableParent;

    $('ul .element').draggable({
        revert: 'invalid',
        revertDuration: 200,
        start: function () {
            droppableParent = $(this).parent();

            $(this).addClass('being-dragged');
        },
        stop: function () {
            $(this).removeClass('being-dragged');
        }
    });

    $('ul li').droppable({
        hoverClass: 'drop-hover',
        drop: function (event, ui) {
            var draggable = $(ui.draggable[0]),
                draggableOffset = draggable.offset(),
                container = $(event.target),
                containerOffset = container.offset();

            $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200);

            draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200);
        }
    });
} ());

Démo, http://jsfiddle.net/FZ42C/1/.

OriginalL'auteur Gajus

0

Vous pouvez utiliser http://plugins.jquery.com/project/Swapable

mais ce n'est pas trop bon plugin

OriginalL'auteur Vishvjeet Kumar

Vous devez vous connecter pour publier un commentaire.