Cómo agregar el efecto DRAG and DROP con Sortable JS
HTML-код
- Опубликовано: 9 авг 2022
- En este nuevo video, te enseñaré a como agregar el efecto DRAG and DROP en sus sitios web.
Plataforma de cursos: codersfree.com
------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.codersfree.com/larave...
🟠 Laravel avanzado: youtube.codersfree.com/larave...
🟢 Ecommerce: youtube.codersfree.com/ecommerce
🔵 Api: youtube.codersfree.com/api-re...
🟠 Plataforma de cursos: youtube.codersfree.com/plataf...
🔴 Vue e Ineria: youtube.codersfree.com/vue-3-...
🟣 Eloquent Avanzado: youtube.codersfree.com/eloque...
🟡 Pasarela de pagos: youtube.codersfree.com/pasare...
⚫ Laravel Web Socket: youtube.codersfree.com/larave...
🟣 Notificaciones: youtube.codersfree.com/notifi...
🟢 Laravel Excel: youtube.codersfree.com/larave...
🔵 Digital Ocean: youtube.codersfree.com/despli...
🟡 Laravel Voyager: youtube.codersfree.com/larave...
🟣 Datatable Livewire: youtube.codersfree.com/datata...
🟠 Tenancy for Laravel: youtube.codersfree.com/multi-...
🔵 TDD Laravel: youtube.codersfree.com/tdd-la...
⚫ Traducir páginas: youtube.codersfree.com/traduc...
🟠 Wire UI: youtube.codersfree.com/livewi...
🔴 Acortador de links: youtube.codersfree.com/acorta...
🟡 Banhammer for laravel: youtube.codersfree.com/banham...
🟢 Laravel backup: youtube.codersfree.com/larave...
🔵 Actualizar a Laravel 10: youtube.codersfree.com/actual...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com/paypalme/Coder...
-----------------------------------------------------------------------
Sortable JS: sortablejs.github.io/Sortable/ 
Наука
te debo todo lo que conozco de laravel, muchas gracias por compartirnos tanto conocimiento 🙌... saludos desde republica dominicana
Muy oportuno este video, justamente necesitaba hacer esto en mi proyecto actual. Gracias!!
X2 😀😀😀
Genial =)
Estupendo como todo lo que haces. Pregunta: ¿tienes una versión para LiveWire?
Está genial el vídeo aunq ubiese podido mostrar cómo está creada la base de datos o y mostrar el ordenamiento cada que mueves un elemento o almenos subir a git el ejemplo para hechare un ojo aún así gracias por compartir
Maximo
Consulta como puedo obtener el valor qye definiste en el data-id={{post-id}} de cada post y enviarlo a la peticion ajax?
Hola, gracias por tu video, estoy trabajando en una aplicación de laravel 10, con la plantilla de adminlte y obtengo este error "Uncaught ReferenceError: axios is not defined", saludos.
En el modelo Post que deberia contener?
buenas noches, lo acabo de implementar pero no logro funcione me da el siguiente error, Uncaught Sortable: `el` must be an HTMLElement, not [object HTMLCollection] ha alguien que pueda darme una idea del error?
Hola Coders free , la funcion drang and drop se puede incluir en un datatable ?
Hola Cristian, que yo sepa no 😁
@@CodersFree muchas gracias por responder
Que tal! Gracias por el tutorial bro!... Hay algo que no entendí. Cuando haces la petición a la base de datos para actualizar el listado con el orden, luego cuando lo obtienes para pasárselo a Sortable JS y que se pinte en pantalla? Eso me dejo loco, no lo comprendí :(
Ejemplo según lo que yo entiendo:
1- Guardas la el orden actual con el método store de Sortable JS
2- El array que se obtuvo en el paso anterior, lo envías como request a base de datos con la api que creaste.
----
Ya aquí me pierdo
3- Se supone que luego debes hacer una consulta a la base de datos para que te regrese el listado guardado con el orden respectivo.
4- Se supone que eso que obtienes, debes pintarlo en pantalla con Sortable JS
Los pasos 3 y 4 son los que no me quedaron claros, desconozco si es que todo se incluye en Laravel con los pasos que hiciste, es que no lo veo claro, no estoy usando Laravel en mi practica jeje
Justamente el funcionamiento es un poco distinto. La petición que le enviamos a la api, es para que nos guarde en base de datos el nuevo orden que ya se generó en el frontend, por lo que no estamos esperando ninguna respuesta.
Al backend solo le estamos enviando el nuevo orden para que la información sea persistente, pero ya en el front se hizo el cambio.
todo muy bien, pero cuando ejecuto axios me genera un error : "Request failed with status code 500" saludos
solucionado, tenia mal escrito el catch 😅
broo ayuda, como lo solucionaste?
@@sebsteps4584
me sale este error 500 (Internal Server Error)
Ponle más zoom al código 😢
Y como podríamos implementar el clonar elementos de una tabla a otra?
Pd: muchas gracias por los video :,)
Hola amigo, te recomiendo leer la documentación