Tengo un script basado en draggable y droppable para mover elementos de una caja a otra dentro de un formulario. El ejemplo práctico sería pasar ciudades de una caja a otra.
El caso es que quiero que al enviar, se recorra la caja a la que he arrastrado los elementos para guardar en un campo oculto(hidden) los ids de los elementos que ha pasado el usuario.
Para ello, tengo que recorrer los elementos de la caja donde se han arrastrado.
El código es el siguiente:
Caja orígen:
Código:
La caja destino sería:<form> <ul id="cuidades" class="ui-helper-reset ui-helper-clearfix ui-droppable"> <li class="ui-widget-content ui-corner-tr ui-draggable"> <div id="list-1" class="container"> <h5 class="ui-widget-header">Álava</h5> </div> </li> <li class="ui-widget-content ui-corner-tr ui-draggable"> <div id="list-2" class="container"> <h5 class="ui-widget-header">Ávila</h5> </div> </li> .... </ul>
Código:
¿Como podría recorrer la lista "destinos" para coger únicamente los ids de los elementos? <ul id="destinos" class="ui-helper-reset ui-helper-clearfix ui-droppable"> <li class="ui-widget-content ui-corner-tr ui-draggable"> <div id="list-33" class="container"> <h5 class="ui-widget-header">Victoria</h5> </div> </li> <li class="ui-widget-content ui-corner-tr ui-draggable"> <div id="list-23" class="container"> <h5 class="ui-widget-header">Málaga</h5> </div> </li> </ul> <input type="hidden" name="ids" id="ids" value=""> </form>