jQuery: Utilisation de boutons bascules pour déplacer des éléments entre plusieurs listes

Question

J'ai trois listes, chaque élément a une barre d'outils de boutons. Les listes sont mises en scène, vivantes et épinglées. J'essaie d'utiliser les boutons à bascule pour déplacer les éléments entre les listes. Comme vous pouvez le voir dans l'exemple jsfiddle ci-dessous, j'ai les boutons qui déplacent les éléments, mais j'ai rencontré deux problèmes avec lesquels j'espérais obtenir de l'aide. Je suis un apprenti visuel, j'ai regardé partout dans Stackoverflow et Google pour un exemple sans chance.

Remarques - Les boutons Modifier et Corbeille ne permettent pas de déplacer les éléments. Je vais exécuter un appel ajax dans chaque action de basculement pour valider chaque changement, je l'ai noté dans mon fichier js.

Exemple de travail: http://jsfiddle.net/RuRdZ/3/

Les problèmes:

1 - Lorsque vous cliquez sur un bouton, par exemple, « faire vivre » dans la liste mise en scène, l'élément se déplace correctement à la liste en direct, mais les boutons sur cet élément semblent être désactivés - après le déplacement, je ne peux pas supprimer l'élément ou le rendre à nouveau mis en scène. Ce sera un problème parce que mon objectif est de ne pas avoir l'actualisation de la page. 2 - Toujours en déplaçant un élément de la liste vers la liste, j'essayais de comprendre comment faire disparaître/apparaître les boutons appropriés. Par exemple, si je mets en scène un élément mis en scène, quand l'objet bouge, je voudrais cacher le bouton "make live" et montrer le bouton "stage". J'ai essayé plusieurs choses mais je ne pense pas que j'utilise le bon sélecteur. Dans chaque rubrique j'ai énuméré les boutons appropriés qui devraient apparaître dans chaque liste.

Nous vous remercions de votre aide!

Answer 1

ne pas utiliser clone, annexant élément existait à un autre, il retire de l'élément conteneur d'origine - il résout le problème avec les événements boutons

faire toutes les actions dans un gestionnaire - alors vous aurez le contrôle sur les boutons à les afficher ou les masquer en conséquence

function doAction($element, buttonsToHide, $containerAppendTo) { 
    $containerAppendTo.append(element); 
    //loop over all buttons inside clicked li 
    $('.fg-buttonset', $element).each(function(){ 
    $currBtn = $(this); 

    $currBtn.toggle(!$currBtn.hasClass(buttonsToHide)); //show|hide if needed 
    }); 
} 

    $(".doStage").click(function() { 
    var $el = $(this).closest('li'); 
    doAction($el, 'stagedButton', $('#test-list3')); 
    });