1

Estoy empezando a trastear con jQuery UI para ordenar los elementos de una lista de canciones; veo que .sortable() actúa sobre la lista en sí, no sobre sus elementos, pero si quiero acceder exactamente al elemento que estoy clicando, ¿cómo lo puedo hacer?

La lista es la siguiente:

<div class="ordenar">

    <form class="cancion-lista row d-flex" method="post" action="<?=url_base?>recopilatorios/indice" data-id-cancion="<?=$id_cancion?>"> <!--Bloque con cada una de las canciones de cada lista-->

        <span class="numero-decada" style="transform: translateY(-2px);"><?=$orden?></span> <!--Puesto en el recopilatorio-->

        <span class="cancion-autor-ano puntos pl-3"> <!--Información de la canción-->
            <span class="font-italic"><?=$titulo_cancion?></span>
            <span> de </span>
            <span class="font-weight-bold"><?=$nombre_autor?></span>
            <span>(<button class="boton-enlace" role="link" name="recopilatorio" value="<?=$recopilatorio?>"><?=$ano?></button>)</span>
        </span>

        <span class="ml-auto"> <!--Reproductor de sonido-->
            <span class="enlace-youtube" data-video="<?=$id_youtube?>"></span>
            <span class="caja-youtube"></span>
        </span>

        <span class="boton-x align-self-center">x</span> <!--Botón para eliminar las canciones-->

    </form>

    ...

</div>

El form se puede repetir entre 1 y 15 veces dentro de un bucle PHP.

Su aspecto, para, por ejemplo, seis elementos form es el siguiente (el título y subtítulo de la lista y los botones quedan fuera del div para evitar que se puedan ordenar):

introducir la descripción de la imagen aquí

Y, por ejemplo, este script:

$(function()
{
    $('.ordenar').sortable(
    {
        update: function()
        {
            var hijos = $(this).children();
            console.log(hijos);
        }
    });

    $('.ordenar').disableSelection();
});

Cuando terminas de arrastrar un elemento de la lista, un form, te imprime por pantalla un array con todos los form, porque this, claro, hace referencia al div con class="ordenar", pero ¿si quisiera que imprimiese el <?=$orden?> del form en concreto que acabo de manipular?

1 respuesta 1

2

El segundo parámetro del evento contiene el elemento arrastrado, la nueva posición la obtienes con index().

    $('.ordenar').sortable(
    {
        update: function(event, ui)
        {
            console.log(ui.item.attr('data-id-cancion')+" en "+ui.item.index());
        }
    });
4
  • ¿item hace también referencia al elemento? el 14 mar. 2021 a las 21:11
  • Al elemento arrastrado.
    – Sal
    el 14 mar. 2021 a las 21:20
  • Me refiero a que si para acceder al elemento necesitas tanto ui como item. el 14 mar. 2021 a las 21:23
  • 1
    Es correcto. Documentación.
    – Sal
    el 14 mar. 2021 a las 21:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.