Jquery UI Sortable transformer la valeur d'un li

Bonjour,

voilà je chercher à transformer la valeur d'un li une fois que le drop est fait. Je m'explique :

J'utilise la fonction sortable de jquery ui, j'ai donc deux listes "gauche" et "droite".

Dans mes li de la liste droite j'ai des span avec chaque une class différente. Dans la liste gauche il n'y a aucun li.

J'aimerai que quand je mets un li de ma liste droite dans la gauche les span se transforment en input avec en name leur class et en value le texte du span.

Je ne sais pas si j'ai été très clair dans mes explications :s

Voilà mon code pour le moment :

<div id="run">
    <h1>PADLIST</h1>
    <ul id="listPad1" class="connectedPadList">
    </ul>
    <h1>CWPLIST</h1>
    <h1>Questionnaires</h1>
</div>
 
<div id="choix">
    <h1>PADLIST</h1>
    <ul id="listPad2" class="connectedPadList">
        <li class="ui-state-default">
            <span class="identifier">CWP1</span>
            <span class="type">operator</span>
            <span class="adress">172.25.79.241</span>
            <span class="username">Participant 1</span>
        </li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>
</div>

var seeClass = $('#listPad1 li.ui-state-default span').attr('class');
$( "#listPad1, #listPad2" ).sortable({
    connectWith: ".connectedPadList",
    stop: function(){alert(seeClass);}
}).disableSelection();

J'espère que vous pourrez m'aider
Merci d'avance !!

Personne ne peux m'aider ?

Hum, j'ai pas tout compris.
Tu as une page de test ?
Comment les spans vont de droite a gauche ?
et question con aussi, mais ça ne serait pas plus logique que ça aille de gauche à droite ? (c'est pour une question d'ergonomie, on est plus habitué à lire à gauche et déplacer les trucs vers la droite que l'inverse je pense)

Merci pour ta réponse

les span vont de droite à gauche avec du drag and drop ici j'ai utilisé jquery ui la fonction sortable.

Et pour le fait que ca aille de droite à gauche et non de gauche à droite, c'est pas moi qui est décider mais mon bosse. Mais le principe serai qu'à gauche on a différents item et il faudrait y placer les li dans tel ou tel item.

Et en faite je veux que quand le li passe dans un item (a gauche) les span se transforment donc en input pour pouvoir ensuite faire passer comme un formulaire pour enregistrer la configuration (la colonne de gauche) dans un xml.

Désolé je n'ai pas de page test en ligne :s

Y a pas de soucis, j'ai fais un petit fiddle : http://jsfiddle.net/r4Yjf/

La j'ai rajouter un li à gauche pour pouvoir déposer sinon ça ne marchait pas.
Donc l'objectif c'est que au lieu de déposer un li, cela se transforme en un input d'un formulaire si j'ai bien saisi ?

Cela ne m'a pas l'air évident, mais j'essaye de jeter un coup d’œil quand j'aurai un peu de temps

Oui c'est ca,
en faite le li peux rester mais c'est le span qui doivent se transformer par exemple pour le premier

<span class="identifier">CWP1</span>

et deviendrai ça

<input type="text" name="identifier" value="CWP1" />

Voilà
Merci beaucoup beaucoup pour ton aide !

Salut,
bon j'ai pas mal galéré (je suis pas très au point pour la manipulation d'object en javascript :x)

Hop un petit lien vers le jsfiddle mis à jour: http://jsfiddle.net/r4Yjf/1/

Donc en gros j'ai séparé le $( "#listPad1, #listPad2" ).sortable({ en 2 différents pour pouvoir différencier quand on déplace dans un sens et dans l'autre.

Ensuite le truc chiant : réussir à manipuler les objects pour trouver la liste qu'on envoie dans le menu de gauche, pour pouvoir ensuite récupérer les spans ( à coup d'alert html et childnodes un peu aléatoire :s )

Une fois que j'ai fini par tomber sur un qui collé bien, on crée un nouveau noeud input on le rempli comme ca va bien et on le colle. ensuite on generalise en faisant une boucle, on ajoute 1 condition pour éviter les noeuds bizarres vides qui sortent de je ne sais où ( 7 ou 8 de louches pour les 4 normaux ^^ )

Et hop on arrive a crée les 4 noeuds input qui vont bien
Dans l'idée logique,je suppose qu'il faudrait que quand on fait le déplacement de la gauche vers la droite, on supprime les inputs , mais bon un peu la flemme la je dois avouer, du coup je te laisse te dépatouiller
(Globalement ça doit pouvoir se faire avec 1 pauvre boucle sur la balise dans lequel on met les inputs qu'on crée )

Bonne soirée

Ps : La j'ai mis les input dans la liste qui reçoit les li , je suppose que cela serait plus logique d'avoir un formulaire vide a la base, genre en dessous de la liste des li de gauche, et qui se rempli , mais bon je connaissais pas les détails de ce que tu voulais du coup je n'ai pas trop bataillé pour le appendchild.

Super merci beaucoup !!!
Je vais essayer de me dépatouiller avec ça.

Merci encore !

Me revoilà ....
alors j'ai bien compris le fonctionnement j'ai même fait des petites modifs pour que ça rende comme je veux mais je n'arrive pas à faire le travail inverse ... donc de passer de input à span ...

voilà ce que j'ai fait :

$("#listPad2").sortable({
                    connectWith: "#listPad1",
                    receive: function (event, ui) {
                        for (var i in ui.item[0].childNodes) {
                            if (ui.item[0].childNodes[i].textContent != "" & ui.item[0].childNodes[i].attributes != null) {
                                var newSpan = document.createElement('span');
                                newSpan.innerHTML = ui.item[0].childNodes[i].value;
                                newSpan.className = ui.item[0].childNodes[i].getAttribute('name');
                                document.getElementById('listPad2').appendChild(newSpan);
                            }
                        }
                    }
                }).disableSelection();

Merci encore ![/i][/i][/i][/i]
Modifié par nathamis (17 Feb 2014 - 14:33)

EDIT :
Bon alors j'ai trouver !

voilà le code

$("#listPad2").sortable({
                    connectWith: "#listPad1",
                    receive: function (event, ui) {
                        var newLi = document.createElement('li');
                        document.getElementById('listPad2').appendChild(newLi);

                        for (var i in ui.item[0].childNodes) {
                            var newSpan = document.createElement('span');
                            newSpan.innerHTML = ui.item[0].childNodes[i].value;
                            newSpan.className = ui.item[0].childNodes[i].getAttribute('name');
                            newLi.appendChild(newSpan);
                        }

                        alert(ui.item);

                        ui.item.remove();
                    }
                }).disableSelection();

Mais ya un truc que je ne comprend pas le ui.item.remove() ne fonctionne pas alors que je l'ai utilisé pour la fonction du dessus et qu'il marche très bien ..... c'est quoi le bug ?

Merci pour ceux qui m'aiderons [/i][/i]

Edit :
j'ai une autre question j'aimerai pouvoir ajouter un id (1, 2, 3, 4, ....) aux li que je met dans la colonne de gauche, quelqu'un saurai me guider dans la marche à suivre ?
Merci !!!
Modifié par nathamis (17 Feb 2014 - 16:02)

Salut,
serait t'il possible d'aussi avoir le code "$("#listPad1").sortable({ .." pour comprendre les modifications que tu as effectué ?
Car j'avoue ne pas comprendre pourquoi tu as besoin de reconstruire des li/span, la où j'en étais rester on les déplacer sans les détruire ^^ . ( et du coup pour la suite j'aurai trouver logique de détruire le input qui va bien au déplacement d'un span de la gauche vers la droite ^^ )

bonjour !
Voilà ce que j'ai fait,
j'ai réussi à delete ce que je voulais, là j'en suis à mes id de m*****
En faite j'ai besoin de mettre des id à mes li (pour ensuite les mettre dans mes name des input) mais je commence d'abord par les mettre sur les li (j'y vais doucement).

Voilà ce que j'ai fait pour le moment :
http://jsfiddle.net/Nathamis/4KJYn/

le problème que j'ai c'est que quand je déplace mes liste d'input il arrive que un li est deux fois le même id ( pas tip top ...)
Du coup je me suis dit : je vais parcourir via une boucle la liste, stocker les id dans un tableau, trouver celui qui est le plus élever et ensuite lui ajouter 1 pour l'id du nouvel li.

Je sais pas trop si je m'explique bien :s.

Enfin mon problème là, c'est de parcourir ma liste ...

EDIT :
mon problème d'id est presque résolut,
ya juste un truc que je n'arrive pas à comprendre.

je voudrai rajouter à mes name l'id du li quelque chose qui donnerai pour un li qui à l'id 2 par exemple : name="identifier_2"
Mais je n'arrive pas à récupéré l'id ....
Tout aide est la bienvenu

Merci beaucoup !
Modifié par nathamis (20 Feb 2014 - 11:48)