IP Girl
  1. IP Girl
  3. Comment dupliquer un article en utilisant jquery sortable?
Intereting Posts
Requêtes Python et sessions persistantes Que proposez-vous de l’éditeur LaTeX pour Linux? Comment estimer le changement de contexte du thread? Utiliser ‘diff’ (ou autre chose) pour obtenir des différences au niveau des caractères entre les fichiers texte Mocking HttpClient dans les tests unitaires C # En utilisant Activator.CreateInstance Chemin du répertoire de document du simulateur bêta d’iOS 8 Comment rendre une méthode Java Generic statique? Comment append de nouveaux points de terminaison à ma machine virtuelle sur le nouveau portail Azure (aperçu)? Comment vérifier si un fichier existe dans un script shell Pourquoi les bibliothèques et les frameworks C ++ n’utilisent-ils jamais de pointeurs intelligents? SQL Server 2008 – SI N’EXISTE PAS INSERT ELSE UPDATE Pourquoi le compilateur Java ne comprend-il pas que cette variable est toujours initialisée? Différence entre le type de tableau et le tableau alloué avec malloc Comment utiliser jQuery pour sélectionner tous les enfants sauf un élément select

Comment dupliquer un article en utilisant jquery sortable?

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?

Pour commencer, lisez ceci et lisez la réponse de @Erez aussi. 

$(function () { $("#sortable1").sortable({ connectWith: ".connectedSortable", remove: function (event, ui) { ui.item.clone().appendTo('#sortable2'); $(this).sortable('cancel'); } }).disableSelection(); $("#sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); 
 $("#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; } });

La solution d’Erez fonctionne pour moi, mais je trouve son manque d’encapsulation frustrant. Je propose 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/

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

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

La réponse de l’abuseur2582707 fonctionne le mieux pour moi. Sauf une erreur: vous devez modifier le retour à 

 return li.item.clone();

Donc ça devrait être: 

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

Lors de l’utilisation de la solution d’Erez, mais pour la connexion de 2 portlets sortingables (la base était le code exemple 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 que ça marche. 

 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 du temps à comprendre, alors j’espère que cela aidera quelqu’un.