Comment dupliquer un article avec jquery sortable?

Question

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 à la liste B, mais lorsque l'élément est supprimé, je dois conserver l'original 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?

Answer 1

$( "#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;
        }
});

Answer 2

Pour commencer, jetez un coup d'œil à cela et lisez aussi la réponse de @Erez.

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

    $( "#sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
 

Answer 3

La solution d'Erez fonctionne pour moi, mais j'ai trouvé son absence d'encapsulation frustrante. 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/