En mi código a continuación, solo el primer #sort-item se puede ordenar, otros no. ¿Cómo puedo resolverlo?
$('#sortable').sortable({ items:"#sort-item" });html;
<ul id="sortable"> <li id="sort-item"></li> <li id="sort-item"></li> <li id="sort-item"></li> <li id="sort-item"></li> <li id="sort-item"></li> </ul>Editar: lo intento;
$('#sortable').sortable({ items:"> #sort-item" });Pero robar no funciona
jsviolín; https://jsfiddle.net/seamqykd/1/
No puede asignar varios elementos a la misma ID ( https://www.w3schools.com/html/html_id.asp )
Utilice una clase para seleccionar los elementos:
<ul id="sortable"> <li class="sort-item"></li> <li class="sort-item"></li> <li class="sort-item"></li> <li class="sort-item"></li> <li class="sort-item"></li> </ul> $('#sortable').sortable({ items:".sort-item" });o mejor aún, usa el elemento
$('#sortable').sortable({ items:"li" });Primero, usar id en múltiples elementos es un error sementic html, las identificaciones se usan para estar en uno y solo un elemento html,
Y esto es lo que causa el problema, simplemente reemplace en el html su id por un nombre de class y en su código js reemplace #sort-item por .sort-item vea el siguiente fragmento de trabajo:
$('#sortable').sortable({ items:".sort-item" }); <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <ul id="sortable"> <li class="sort-item">aaa</li> <li class="sort-item">bbb</li> <li class="sort-item">ccc</li> <li class="sort-item">ddd</li> <li class="sort-item">eee</li> </ul>