sublime explicación y dinámica. es complicado encontrar recursos en español así, entonces se agradece una baaaaaaaaaaaanda el esfuerzo invertido. muy buen canal, suscrito
Excelente video.!!!! Muy ilustrativo y dinámico. La parte de data transfer no la comprendí muy bien por falta de manejo del concepto. Si pudieras hacer un video al respecto sería un buen complemento. Espero sigas haciendo videos sobre el tema. Muchas gracias.
Hola, el dataTransfer básicamente es el método que nos permite “transferir” datos desde un evento a otro, fijate que lo uso en 2 lugares: uno para establecer (setData) el dato y el otro para obtenerlo (getData), ambos eventos están asignado a elementos distintos, por lo cual se transfirió desde un dragstart (asignado a piezas) a un drop (asignado a puzzle). Saludos!
No apto para novatos como yo, los estilos y y el JS en línea me pusieron a sufrir es la segunda vez que lo veo y está vez puedo decir que casi entiendo todo, solo quiero estudiar a fondo dos cositas más. Gracias !!!
Muchas gracias por tu comentario! Tené en cuenta que este es el segundo video sobre Drag and Drop, quizás con el primero hubiese sido mas sencillo, también hay videos sobre eventos para fortalecer los conocimientos! Saludos!
Funciona en dispositivos táctiles ? Y sabes si existe una manera universal para hacerlo funcionar en escritorio y celulares ? Gracias por tus vídeos , saludos !
Hola, excelente video y muy bien explicado. Por favor, ¿cómo podemos hacer para que el Drag and drop funcione también en dispositivos táctiles como la tablet o el móbil? ¿Puedes crear un video sobre esto?
Muchas gracias por tu comentario! Actualmente no tengo pensado hacer un video específicamente de este tema por lo cual puedo recomendarte este articulo medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5 en el cual hablan sobre la API de Touch (con eventos como touchstart, touchend, touchmove) con la cual podes resolver el concepto de drag and drop en mobile con buena compatibilidad, espero que te sirva! Saludos!
Muy buen video.... Lo que no encuentro por ningún lado es un video que muestre el código de como cuando mueves una pieza a una imagen con forma de papelera, dicho pieza se elimine
Me parece interesante que enseñes a como programar un ajedrez, ya que es un juego para pensar y de estrategia, sería un buen reto He estado pensando como podría hacerlo, pero no sé como empezar 🙁 Excelente video 👌
Hola! Eso parece un gran desafío!, y por ahora lo que apunto es a temas concretos de HTML, CSS y JS, este "juego" fue una excepción simplemente porque me resultaba practico para enseñar el dataTransfer, quizás en un futuro pueda realizar juegos utilizando alguna librería para ello. Saludos!
Hola! Muy buena tu explicación. Una pregunta. ¿Cómo puedo en js arrastrar y soltar para eliminar?, igual que una papelera. Saludos desde Rep Dominicana.
Hola, todo depende de a que te refieras con "eliminar" porque eso podría derivar a una petición al servidor para notificar de la eliminación, si es algo mas visual, que deje de estar en pantalla, podrías hacerlo con CSS con la propiedad "display" y el valor "none"; o podrías utilizar el removeChild ( developer.mozilla.org/es/docs/Web/API/Node/removeChild ) o remove ( developer.mozilla.org/en-US/docs/Web/API/Element/remove ). Saludos!
Hola, felicitaciones por la clase! ¡Muy buena! Tengo una duda. ¿Por qué el nombre de "id" (en 6:02) no está entre comillas? Así: div.id = "imagenes" [index]; Es así en HTML: ¿Cuál es la diferencia? Lo siento, no entiendo muy bien el español. Saludos desde Brasil. ¡Muchas gracias! ¡Éxito para usted!
Hola! Antes que nada muchas gracias por tu comentario!, con respecto a tu consulta: porque lo que estoy haciendo ahí es asignarle como ID un nombre que lo obtengo de un array llamado "imagenes", al hacer: div.id = imagenes[index]; lo que estoy haciendo es acceder a la posición “index” del array “imagenes” y obtener un valor, como por ejemplo: “imagen-0” No estoy generando un string “imagenes” + un numero, estoy consultando un array. Espero que haya aclarado la duda. Saludos!
yo queria seguir el ejercicio pero no esta el link del codigo inicial como se menciona en el video :(, aun asi excelente contenido y super interesante, esto me va a ayudar muchisimo, Gracias!!!.
Hola!, te dejo el link del código: github.com/programandoeldestino/drag-and-drop-puzzle/blob/main/index.html espero que te resulte útil. Gracias por el comentario! Saludos!
Hola , veo que tus imagenes las colocas como un background de un div, así lo que mueves el solo el div, yo hize un ejemplo donde coloqué las imagenes en el HTML ,dentro de un div y con js capturo los id de las imagenes pero sin embargo no me funciona, las imagenes no se muevan hacia su destino, sera que para mover imagenes se hace de manera distinta ?
Que seria dataTransfer? tipo un localStorage para eventos? porque el evento donde seteas la data no es el mismo que el que usas para obtener la data.. osea como son eventos diferentes deduzco que debe ser algun acceso global donde los eventos pueden guardar informacion.. o me equivoco??
Básicamente es un contenedor de información que utilizamos para el evento de Drag and Drop, en un determinado punto dejamos información (dataTransfer.setData) y en otro punto la recuperamos (dataTransfer.getData)! Espero haber aclarado la duda! Saludos!
No entiendo como funciona, si los addEventListener se los agregas a "puzzle" y cuando haces hover en un casillero el target es un contenedor en particular, osea un hijo de "puzzle" y no el div con id "puzzle" que es donde agregaste el evento.. yo creia que los eventos habia que agregarselos a cada uno de los contenedores que tienen la clase "placeholder", no entiendo como se da cuenta cual es el target si se lo agregaste al div con id "puzzle"
Esto se debe a la delegación de eventos, tema que explico en este video th-cam.com/video/hiZUZ3ed-u0/w-d-xo.html , espero que con esto te quede mas claro! Saludos!
sublime explicación y dinámica. es complicado encontrar recursos en español así, entonces se agradece una baaaaaaaaaaaanda el esfuerzo invertido. muy buen canal, suscrito
Muchísimas gracias por tu comentario y la suscripción! Espero que otros videos te resulten útiles! Saludos!
Excelente video.!!!! Muy ilustrativo y dinámico. La parte de data transfer no la comprendí muy bien por falta de manejo del concepto.
Si pudieras hacer un video al respecto sería un buen complemento.
Espero sigas haciendo videos sobre el tema.
Muchas gracias.
Hola, el dataTransfer básicamente es el método que nos permite “transferir” datos desde un evento a otro, fijate que lo uso en 2 lugares: uno para establecer (setData) el dato y el otro para obtenerlo (getData), ambos eventos están asignado a elementos distintos, por lo cual se transfirió desde un dragstart (asignado a piezas) a un drop (asignado a puzzle). Saludos!
No apto para novatos como yo, los estilos y y el JS en línea me pusieron a sufrir es la segunda vez que lo veo y está vez puedo decir que casi entiendo todo, solo quiero estudiar a fondo dos cositas más. Gracias !!!
Muchas gracias por tu comentario! Tené en cuenta que este es el segundo video sobre Drag and Drop, quizás con el primero hubiese sido mas sencillo, también hay videos sobre eventos para fortalecer los conocimientos! Saludos!
Espectacular!! Muchas gracias!, nuevo suscriptor
Muchas gracias por tu comentario y la suscripción! Saludos!
muy bueno
Muchas gracias! Saludos!
buenisimo, gracias!
Muchas gracias por tu comentario! Saludos!
Funciona en dispositivos táctiles ? Y sabes si existe una manera universal para hacerlo funcionar en escritorio y celulares ?
Gracias por tus vídeos , saludos !
Hola, excelente video y muy bien explicado. Por favor, ¿cómo podemos hacer para que el Drag and drop funcione también en dispositivos táctiles como la tablet o el móbil? ¿Puedes crear un video sobre esto?
Muchas gracias por tu comentario! Actualmente no tengo pensado hacer un video específicamente de este tema por lo cual puedo recomendarte este articulo medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5 en el cual hablan sobre la API de Touch (con eventos como touchstart, touchend, touchmove) con la cual podes resolver el concepto de drag and drop en mobile con buena compatibilidad, espero que te sirva! Saludos!
Buenísimo!!!!
Muchas gracias! Saludos!
gracias amigo
Gracias a vos por tu comentario! Saludos!
Muy interesante. Gracias por el tutorial :')
Muchas gracias por tu comentario! Espero que otros videos te sean de utilidad! Saludos!
Muy buen video....
Lo que no encuentro por ningún lado es un video que muestre el código de como cuando mueves una pieza a una imagen con forma de papelera, dicho pieza se elimine
Me parece interesante que enseñes a como programar un ajedrez, ya que es un juego para pensar y de estrategia, sería un buen reto
He estado pensando como podría hacerlo, pero no sé como empezar 🙁
Excelente video 👌
Hola! Eso parece un gran desafío!, y por ahora lo que apunto es a temas concretos de HTML, CSS y JS, este "juego" fue una excepción simplemente porque me resultaba practico para enseñar el dataTransfer, quizás en un futuro pueda realizar juegos utilizando alguna librería para ello. Saludos!
Hola! Muy buena tu explicación. Una pregunta. ¿Cómo puedo en js arrastrar y soltar para eliminar?, igual que una papelera. Saludos desde Rep Dominicana.
Hola, todo depende de a que te refieras con "eliminar" porque eso podría derivar a una petición al servidor para notificar de la eliminación, si es algo mas visual, que deje de estar en pantalla, podrías hacerlo con CSS con la propiedad "display" y el valor "none"; o podrías utilizar el removeChild ( developer.mozilla.org/es/docs/Web/API/Node/removeChild ) o remove ( developer.mozilla.org/en-US/docs/Web/API/Element/remove ). Saludos!
Hola, felicitaciones por la clase! ¡Muy buena! Tengo una duda. ¿Por qué el nombre de "id" (en 6:02) no está entre comillas? Así: div.id = "imagenes" [index];
Es así en HTML:
¿Cuál es la diferencia?
Lo siento, no entiendo muy bien el español. Saludos desde Brasil. ¡Muchas gracias! ¡Éxito para usted!
Hola! Antes que nada muchas gracias por tu comentario!, con respecto a tu consulta: porque lo que estoy haciendo ahí es asignarle como ID un nombre que lo obtengo de un array llamado "imagenes", al hacer:
div.id = imagenes[index];
lo que estoy haciendo es acceder a la posición “index” del array “imagenes” y obtener un valor, como por ejemplo: “imagen-0”
No estoy generando un string “imagenes” + un numero, estoy consultando un array.
Espero que haya aclarado la duda.
Saludos!
@@programandoeldestino4492 Gracias por la respuesta. Ahora entendí. Realmente sabes lo que estás haciendo. ¡Felicidades! Saludos.
podrias subir al git la carpeta con las imágenes? Gracias por el aporte!
Subidas! Espero que te sirvan para la practica! Saludos!
yo queria seguir el ejercicio pero no esta el link del codigo inicial como se menciona en el video :(, aun asi excelente contenido y super interesante, esto me va a ayudar muchisimo, Gracias!!!.
Hola!, te dejo el link del código: github.com/programandoeldestino/drag-and-drop-puzzle/blob/main/index.html espero que te resulte útil. Gracias por el comentario! Saludos!
Tengo una duda y es que le quito la opción de random, pero el código ya no funciona, ¿como puedo hacer para que las fichas no sean aleatorias?
sirve para celular?
dataTransfer :o
Es lo fundamental! Gracias por el comentario! Saludos!
Hola , veo que tus imagenes las colocas como un background de un div, así lo que mueves el solo el div, yo hize un ejemplo donde coloqué las imagenes en el HTML ,dentro de un div y con js capturo los id de las imagenes pero sin embargo no me funciona, las imagenes no se muevan hacia su destino, sera que para mover imagenes se hace de manera distinta ?
Para utilizar imágenes en lugar de divs con background podrías hacer esto:
while (imagenes.length) {
const index = Math.floor(Math.random() * imagenes.length);
const img = document.createElement('img');
img.className = 'pieza';
img.id = imagenes[index];
img.draggable = true;
img.src = `recursos/${imagenes[index]}.jpg`;
piezas.appendChild(img);
imagenes.splice(index, 1);
}
Saludos!
¿Como se arrastra filas (intercambiar filas) de una tabla en HTML5 con Javascript?
Que seria dataTransfer? tipo un localStorage para eventos? porque el evento donde seteas la data no es el mismo que el que usas para obtener la data.. osea como son eventos diferentes deduzco que debe ser algun acceso global donde los eventos pueden guardar informacion.. o me equivoco??
Básicamente es un contenedor de información que utilizamos para el evento de Drag and Drop, en un determinado punto dejamos información (dataTransfer.setData) y en otro punto la recuperamos (dataTransfer.getData)! Espero haber aclarado la duda! Saludos!
Hola solo tengo una duda ¿Cómo recortaste la imagen?
Hola! Utilice un programa que se llama GIMP! Saludos!
Que lastima que safari no le da soporte, tuve que descartar esta solucion por eso :(
Acá podes ver la compatibilidad del drag and drop caniuse.com/?search=drag%20and%20drop Saludos!
No entiendo como funciona, si los addEventListener se los agregas a "puzzle" y cuando haces hover en un casillero el target es un contenedor en particular, osea un hijo de "puzzle" y no el div con id "puzzle" que es donde agregaste el evento.. yo creia que los eventos habia que agregarselos a cada uno de los contenedores que tienen la clase "placeholder", no entiendo como se da cuenta cual es el target si se lo agregaste al div con id "puzzle"
Esto se debe a la delegación de eventos, tema que explico en este video th-cam.com/video/hiZUZ3ed-u0/w-d-xo.html , espero que con esto te quede mas claro! Saludos!
dislike.
You SHOULD have mentioned that it's no in ENGLISH in the title.
aprende español pues