JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<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>
CSS
#listPad1, #listPad2 {
background-color: yellow;
padding: 5px;
width:250px;
}
div {
display:inline-block;
width:350px;
}
JavaScript
$(function () {
$("#listPad1").sortable({
connectWith: "#listPad2",
receive: function (event, ui) {
//on parcourt les noeuds du li qu'on vient de deplacer.
for (var i in ui.item[0].childNodes) {
//on fait une petite verification pour ne pas prendre les noeuds qui correspondent pas
if (ui.item[0].childNodes[i].textContent != "" & ui.item[0].childNodes[i].attributes != null) {
//alert(ui.item[0].childNodes[i].attributes);
//on crée un input et on rempli la valeur et on met le nom de class dans le name
var newInput = document.createElement('input');
newInput.type = "text";
newInput.value = ui.item[0].childNodes[i].textContent;
newInput.name = ui.item[0].childNodes[1].getAttribute("class");
document.getElementById('listPad1').appendChild(newInput);
}
}
}
}).disableSelection();
//on fait la fonction a part pour ne pas faire d'ajout d'input quand on va de gauche vers la droite
$("#listPad2").sortable({
connectWith: "#listPad1",
}).disableSelection();
});