web-dev-qa-db-fra.com

Comment dupliquer un élément lors de l'utilisation de jquery triable?

J'utilise cette méthode http://jqueryui.com/demos/sortable/#connect-lists pour connecter deux listes que j'ai. Je veux pouvoir faire glisser de la liste A vers la liste B, mais lorsque l'élément est supprimé, je dois garder l'original toujours dans la liste A. J'ai vérifié les options et les événements, mais je crois qu'il n'y a rien de tel. Des approches?

jquerylistdrag-and-dropduplicatesjquery-ui-sortable
56
odle

Pour commencer, regardez ça , et lisez aussi la réponse @Erez.

$(function () {
    $("#sortable1").sortable({
        connectWith: ".connectedSortable",
        remove: function (event, ui) {
            ui.item.clone().appendTo('#sortable2');
            $(this).sortable('cancel');
        }
    }).disableSelection();

    $("#sortable2").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});
25
Thorsten
$("#sortable1").sortable({
    connectWith: ".connectedSortable",
    forcePlaceholderSize: false,
    helper: function (e, li) {
        copyHelper = li.clone().insertAfter(li);
        return li.clone();
    },
    stop: function () {
        copyHelper && copyHelper.remove();
    }
});
$(".connectedSortable").sortable({
    receive: function (e, ui) {
        copyHelper = null;
    }
});
85
Erez

La solution d'Erez fonctionne pour moi, mais j'ai trouvé son manque d'encapsulation frustrant. Je proposerais d'utiliser la solution suivante pour éviter l'utilisation de variables globales:

$("#sortable1").sortable({
    connectWith: ".connectedSortable",

    helper: function (e, li) {
        this.copyHelper = li.clone().insertAfter(li);

        $(this).data('copied', false);

        return li.clone();
    },
    stop: function () {

        var copied = $(this).data('copied');

        if (!copied) {
            this.copyHelper.remove();
        }

        this.copyHelper = null;
    }
});

$("#sortable2").sortable({
    receive: function (e, ui) {
        ui.sender.data('copied', true);
    }
});

Voici un jsFiddle: http://jsfiddle.net/v265q/190/

28
Sean Anderson

Je sais que c'est vieux, mais je n'ai pas pu obtenir la réponse d'Erez au travail, et Thorsten ne l'a pas coupé pour le projet pour lequel j'en ai besoin. Cela semble fonctionner exactement comme j'ai besoin:

$("#sortable2, #sortable1").sortable({
    connectWith: ".connectedSortable",
    remove: function (e, li) {
        copyHelper = li.item.clone().insertAfter(li.item);
        $(this).sortable('cancel');
        return li.clone();
    }
}).disableSelection();
7
abuser2582707

La réponse de abuser2582707 me convient le mieux. Sauf une erreur: vous devez modifier le retour à

return li.item.clone();

Il devrait donc être:

$("#sortable2, #sortable1").sortable({
    connectWith: ".connectedSortable",
    remove: function (e, li) {
        li.item.clone().insertAfter(li.item);
        $(this).sortable('cancel');
        return li.item.clone();
    }
}).disableSelection();
5
creativecat

Lorsque vous utilisez la solution d'Erez mais pour connecter 2 portlets triables (la base était l'exemple de code de portlet de http://jqueryui.com/sortable/#portlets ), la bascule sur le clone ne fonctionnerait pas. J'ai ajouté la ligne suivante avant "return li.clone ();" pour le faire fonctionner.

copyHelper.click(function () {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
});

Cela m'a pris un certain temps pour comprendre donc j'espère que cela aide quelqu'un.

0
user1505746