0

intento hacer dos listas con JqueryUI que sean sortables y se pueda hacer drag and drop entre ellas.

Para ellos tengo el "head" de mi plantilla blade de esta forma, donde cargo jquery y jqueryUI

{{--JQUERY--}}
<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>

{{--DRAG AND DROP JQUERY--}}
<link rel="stylesheet"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<script
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Luego voy al archivo donde quiero poner las listas y tengo este código

 <script>
    $(function() {
        $('#sortable').sortable();
        $('#sortable').disableSelection();
    });
</script>

Las listas las creo de esta forma

<ul id="sortable">
<li>
    <h1>Titular de la noticia 1</h1>
    <p>1234</p>
</li>
<li>
    <h1>Titular de la noticia 2</h1>
    <p>1234</p>
</li>

Y el error que me da al cargar la página es este.

Por más que busco en esta página, la gente dice que poniendo primero Jquery.js y luego Jquery-ui debe funcionar, pero eso ya lo hago.

Gracias,

introducir la descripción de la imagen aquí

2
  • ¿Podrías añadir el HTML donde tengas el elemento con id "sortable"?
    – ordago
    el 30 may. 2020 a las 7:06
  • Gracias, he añadido el código de las listas
    – ilernet
    el 31 may. 2020 a las 6:13

1 respuesta 1

0

He usado tu código y me ha funcionado correctamente, quizas el problema venga en la manera que en la que montas el html completo, yo lo hice así y lo he probado en Firefox y Chrome sin problemas:

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet"
            href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    </head>
    <body>
        <ul id="sortable" style="cursor:move;">
            <li>
                <h1>Titular de la noticia 1</h1>
                <p>1234</p>
            </li>
            <li>
                <h1>Titular de la noticia 2</h1>
                <p>1234</p>
            </li>
        </ul>
        <script src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script>
            $(function () {
                $('#sortable').sortable();
                $('#sortable').disableSelection();
            });
        </script>
    </body>
</html>

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.