Excelente, al fin conozco la API de Drug and Drop, ya que no lo ví en los ejercicios del DOM, ahora aprender sus eventos aquí es genial, muy buen capítulo
Gracias profesor, me sirvió mucho para animar la carga de archivos en un sistema que estoy realizando. El reto es hacer que las imágenes y archivos se visualicen en el espacio visual interno del drag&drop.
Muy útil saber de estos eventos, gracias por el tutorial. Note que cuando agarramos un archivo y pasamos sobre las letras dentro del drop zone, toma esa posición como si hubiéramos abandonado la zona, que solución podríamos darle? La primera que se me ocurrió es sacar el texto cuando estemos drageando algo, pero tal vez haya una mejor forma
Yo creo una class en p, ese p lo guarde en variable con query selector. En css hice que si article p. tiene la classe display none. Antes de los eventos le remove la class. Entonces en los eventos si entra el mouse se la añado. Si sale el mouse se la quitó para que aparezca y cuando es drop se la remuevo. Funciona aunque no es la mejor manera supongo con .toggle también funciona. Intenté en js añadiendo * para que tome el interior del article también pero como no es if() no me funciona ni usando match ni ==.
Genial.. Saludos Jon. TinyPng tiene también la funcionalidad de abrir el explorador de archivos al hacer click, como lo harìa un input file. Pero leyendo por allí encontré alguien que decía que desde Js no se puede?, es cierto eso?? ademas inspeccione el elemento el código y no parece implementar un input. Cual crees que es el manera de desarrollar esa funcionalidad??..
Lo puedes hacer con una etiqueta label, entonces ocultas el input. Y cuando le des al label hará lo mismo. El label le agregas CSS como si fuera un div.
Que tal Jon, excelente tutorial! muchas gracias por tan buen contenido. Me surgió una duda en este video, en la parte que hablas sobre la propagación y pones el preventDefault y el stopPropagation no me quedó muy claro, cual es la propagación allí? no notó algún cambió al hacerlo de ambas maneras, será alguna feature antigua?
Me parece que con el stopPropagation debería evitar que el evento llegue hasta el objeto window, quedándose unicamente en el elemento que origina el evento (el article del drop-zone), pero aún con la detención de propagación me sigue apareciendo hasta el objeto window, no entiendo porque tampoco me funciona. Por si Jon lo llega a ver, es en el minuto 11:30.
Hola Profesor, saludos desde Barcelona, felicitarlo por el excelente contenido de su canal y sobretodo éste curso que me tiene enganchado. Una pregunta, estoy especializado en VBA Access y hasta ahora las aplicaciones para la industria las he desarrollado en Access por la facilidad tanto para mí como para los usuarios y mandos intermedios en hacer cambios pero creo que serían mejores si fuesen en postgresql y otro lenguaje que me gustaría su opinion si JS, PHP, Python por poder tener una tablet al lado de la máquina de producción y poder utilizar toda clase de dispositivos a pesar de que hoy en día ya tenemos pcs muy pequeños. Me puede dar su opinión? De nuevo agradecerle su enorme ayuda que nos proporciona a través de éste canal.
Pues usa el lenguaje que se te facilite o sepas, python es un lenguaje muy bueno, PHP esta en todos lados y JS con Node lo puedes tener en el front y en el back si me das a escoger yo me iría por JS pero eso es subjetivo
@@jonmircha Gracias Jon, es cierto que continuar con el lenguaje que ya se conoce bien es buena opción pero yo soy culo de mal asiento e inconformista, ya imaginaba su respuesta sobre JS porque se siente muy cómodo y feliz con él y con este curso me está picando el gusanillo y salir de la zona de confort. Gracias de nuevo Maestro.
@jonmircha Profe si en vez de enviar los archivos a otra carpeta los quiero enviar es a una base de datos entones en la función 'move_uploaded_file()' de php en su segundo parámetro iría la URL de la base de datos?????
no, no es buena práctica subir un fichero a una bd, lo que debes hacer es guardar la ruta donde esta ese archivo en algun campo de tu bd pero no el archivo completo
Hola Jon, en el curso de PHP algún video habla sobre el file_exists, ya que he tratado de implementarlo en el ejemplo que nos entregas pero no lo logro, saludos y gracias
Hola Jon, entiendo que esta funcionalidad drag and drop nos sería útil para crear una barra slider, por ejemplo con imágenes, e ir deslizándolas????? Algo similar al slider que ya hemos hecho en ejercicios anteriores pero sin pulsar sobre las flechas derecha o izquierda para moverlas? Sería compatible con chrome android?? Gracias por el curso, para los novatos en este apasionante mundo de la web eres nuestro faro guía, jeje.
@@jonmircha okey sabiendo eso lo voy a implementar a un proyecto que estoy haciéndo para mi portafolio :D muchas gracias jon la verdad tus cursos me han ayudado mucho :D
Despues de hora y media de no poder hacer que me tomara el evento "drop", revisando librerias, pensando que mi chrome estaba desactualizado, etc, estaba por pedir socorro cuando vi que me faltaron los parentesis en los preventDefault . No se si sentirme bien por encontrarlo o mal por cometer un error tan tonto al escribir el codigo
Buen día profe, tengo un problema no puedo hacer un Drag and drop en táctil, me puede recomendar una pagina web o video donde me lo pueda explicar, gracias¡¡.
@@jonmircha ya puedo mover el elemento por toda la pantalla, pero no se como detectar que un elemento en específico está sobre otro elemento específico.
Hola Jon, cuando arrastro por encima del texto del drag and drop se cancela la animacion :o para solucionar eso tendria que usar la delegacion de eventos directamente o hay otra forma de solucionar eso? :o saludos
@@jonmircha a mi me pasa igual, se crea un box en el texto "arrastra suelta tus archivos" en el cual se cancela la animación del drop del archivo. Es como si existiera un cuadrado en el cual no se encuentra la drop-zone
Hola estoy viendo tus videos de JavaScript pero tienes cursos de temas que me interesan que están creo desactualizados por la cantidad de años que llevan: ¿Recomiendas aprender con esos cursos (me refiero a los de rwd, desarrollo web, HTML, etc), a pesar de que son bastantes viejos? si es así, ¿por qué? ¿piensas actualizar los cursos que tienes en TH-cam?. Saludos desde colombia.
SIguen siendo vigente ya que siguen dandote las bases, por el momento no pienso renovarlos ya qque terminando el de JS pienso seguir con Webpack, Grid CSS, React, Bootstrap, Firebase... etc
Doy fe que sirven y mucho, al menos los de php y HTML que son los que vi, tal vez aparecieron nuevas herramientas, pero con las bases que sientan los cursos estamos en condiciones de aprenderlas por nuestra cuenta
Buenas tardes profesor. Estuve leyendo la plan de cursos referidos en la repuesta al usuario Levis Suerez y no comenta nada sobre base de datos, no cree conveniente un cursito de este tipo.
Genio profeee!! tome su buen like y comentario para ayudar al posicionamiento
👋🏻😉
Gracias por estas clases tan geniales Profe jhon
😉👋🏻
el mejor #curso de #javascript
😉👍🏻
🧙♂Muchas gracias!!!! Buen curso!!!
👋🏻😉
gracias maestro excelente clase 😘😘😘😘😘
👋🏻😉
Muy buenas tardes a todos
GRANDE JON!!!!!ALEGRAS MIS MAÑANAS DE FINES DE SEMANA QUE ES CUANDO PUEDO ESTUDIAR !!!!
😉👍🏻
🙂 seguimos.
😉👋🏻
Gracias Profe, continuaré estudiando
Que hermosa API drag and drop :3
Gracias Jon excelente video!!
😉👍🏻
Muy agradecido con todo lo que enseñas. Dios te bendiga jon
😃🙌🏻
sabía que llegaría este día
👉🏻
Muy muy bueno, me encantó!
😉👋🏻
Excelente, al fin conozco la API de Drug and Drop, ya que no lo ví en los ejercicios del DOM, ahora aprender sus eventos aquí es genial, muy buen capítulo
😉👌
bien intensa la api de drug and drop xd
gracias
👋🏻😉
Este curso es la biblia de JavaScript(en el buen sentido)
🥳
profe, usted es el mejor
Gracias por tu apoyo
Fantastico👏🏼👏🏼
Gracias
Gracias profesor, me sirvió mucho para animar la carga de archivos en un sistema que estoy realizando. El reto es hacer que las imágenes y archivos se visualicen en el espacio visual interno del drag&drop.
Muy claro y facil de entender! Feliz 2021 Jon!!
Igualmente!
Awesome
🤓👍🏻
👏👏👏 🙏🙏🙏
👋🏻😉
Excelente
👍🏻
Muy útil saber de estos eventos, gracias por el tutorial. Note que cuando agarramos un archivo y pasamos sobre las letras dentro del drop zone, toma esa posición como si hubiéramos abandonado la zona, que solución podríamos darle? La primera que se me ocurrió es sacar el texto cuando estemos drageando algo, pero tal vez haya una mejor forma
Yo creo una class en p, ese p lo guarde en variable con query selector. En css hice que si article p. tiene la classe display none. Antes de los eventos le remove la class. Entonces en los eventos si entra el mouse se la añado. Si sale el mouse se la quitó para que aparezca y cuando es drop se la remuevo. Funciona aunque no es la mejor manera supongo con .toggle también funciona. Intenté en js añadiendo * para que tome el interior del article también pero como no es if() no me funciona ni usando match ni ==.
Genial.. Saludos Jon. TinyPng tiene también la funcionalidad de abrir el explorador de archivos al hacer click, como lo harìa un input file. Pero leyendo por allí encontré alguien que decía que desde Js no se puede?, es cierto eso?? ademas inspeccione el elemento el código y no parece implementar un input. Cual crees que es el manera de desarrollar esa funcionalidad??..
No la he revisado
Lo puedes hacer con una etiqueta label, entonces ocultas el input. Y cuando le des al label hará lo mismo.
El label le agregas CSS como si fuera un div.
Espero pronto poder realizar una donación formal, pero por el momento dejo correr los anuncions para ayudar.
😉🙌🏻
Que tal Jon, excelente tutorial! muchas gracias por tan buen contenido. Me surgió una duda en este video, en la parte que hablas sobre la propagación y pones el preventDefault y el stopPropagation no me quedó muy claro, cual es la propagación allí? no notó algún cambió al hacerlo de ambas maneras, será alguna feature antigua?
En qué parte del video ?
Me parece que con el stopPropagation debería evitar que el evento llegue hasta el objeto window, quedándose unicamente en el elemento que origina el evento (el article del drop-zone), pero aún con la detención de propagación me sigue apareciendo hasta el objeto window, no entiendo porque tampoco me funciona.
Por si Jon lo llega a ver, es en el minuto 11:30.
El preventDefault es para que no abra el archivo en otra pestaña
Hola Profesor, saludos desde Barcelona, felicitarlo por el excelente contenido de su canal y sobretodo éste curso que me tiene enganchado.
Una pregunta, estoy especializado en VBA Access y hasta ahora las aplicaciones para la industria las he desarrollado en Access por la facilidad tanto para mí como para los usuarios y mandos intermedios en hacer cambios pero creo que serían mejores si fuesen en postgresql y otro lenguaje que me gustaría su opinion si JS, PHP, Python por poder tener una tablet al lado de la máquina de producción y poder utilizar toda clase de dispositivos a pesar de que hoy en día ya tenemos pcs muy pequeños.
Me puede dar su opinión?
De nuevo agradecerle su enorme ayuda que nos proporciona a través de éste canal.
Pues usa el lenguaje que se te facilite o sepas, python es un lenguaje muy bueno, PHP esta en todos lados y JS con Node lo puedes tener en el front y en el back si me das a escoger yo me iría por JS pero eso es subjetivo
@@jonmircha Gracias Jon, es cierto que continuar con el lenguaje que ya se conoce bien es buena opción pero yo soy culo de mal asiento e inconformista, ya imaginaba su respuesta sobre JS porque se siente muy cómodo y feliz con él y con este curso me está picando el gusanillo y salir de la zona de confort.
Gracias de nuevo Maestro.
👨
👋🏻😉
@jonmircha Profe si en vez de enviar los archivos a otra carpeta los quiero enviar es a una base de datos entones en la función 'move_uploaded_file()' de php en su segundo parámetro iría la URL de la base de datos?????
no, no es buena práctica subir un fichero a una bd, lo que debes hacer es guardar la ruta donde esta ese archivo en algun campo de tu bd pero no el archivo completo
@@jonmircha ok ok si entendí, muchas gracias profe :3
@@jonmircha ok ok si entendí, muchas gracias profe :3
@@jonmircha yo creí que no era posible subir archivos a un bd, gracias.
Hola Jon, en el curso de PHP algún video habla sobre el file_exists, ya que he tratado de implementarlo en el ejemplo que nos entregas pero no lo logro, saludos y gracias
hay varios pero no de jon
Hola Jon, entiendo que esta funcionalidad drag and drop nos sería útil para crear una barra slider, por ejemplo con imágenes, e ir deslizándolas????? Algo similar al slider que ya hemos hecho en ejercicios anteriores pero sin pulsar sobre las flechas derecha o izquierda para moverlas? Sería compatible con chrome android?? Gracias por el curso, para los novatos en este apasionante mundo de la web eres nuestro faro guía, jeje.
Si se podría implementar esa funcionalidad que mencionas
Este mismo codigo se puede usar react ? o hay una libreria para usar drag a drop en react que recomendies
Si se puede, finalmente, cualquier codigo vanilla lo puedes usar en React, angular, vue, etc
@@jonmircha okey sabiendo eso lo voy a implementar a un proyecto que estoy haciéndo para mi portafolio :D muchas gracias jon la verdad tus cursos me han ayudado mucho :D
Despues de hora y media de no poder hacer que me tomara el evento "drop", revisando librerias, pensando que mi chrome estaba desactualizado, etc, estaba por pedir socorro cuando vi que me faltaron los parentesis en los preventDefault .
No se si sentirme bien por encontrarlo o mal por cometer un error tan tonto al escribir el codigo
de esos errores se aprende mucho 😉
Buen día profe, tengo un problema no puedo hacer un Drag and drop en táctil, me puede recomendar una pagina web o video donde me lo pueda explicar, gracias¡¡.
busca la API de los eventos touch en MDN
@@jonmircha ya puedo mover el elemento por toda la pantalla, pero no se como detectar que un elemento en específico está sobre otro elemento específico.
profe mircha, porque cuando arrastro por encima del texto se cancela la animacion, como soluciono ese detalle.
:O
@@jonmircha me pasa igual, en el texto parece que removiera la clase is-active
Hola Jon, cuando arrastro por encima del texto del drag and drop se cancela la animacion :o para solucionar eso tendria que usar la delegacion de eventos directamente o hay otra forma de solucionar eso? :o saludos
😮 en qué parte del video ?
@@jonmircha a mi me pasa igual, se crea un box en el texto "arrastra suelta tus archivos" en el cual se cancela la animación del drop del archivo. Es como si existiera un cuadrado en el cual no se encuentra la drop-zone
Hola estoy viendo tus videos de JavaScript pero tienes cursos de temas que me interesan que están creo desactualizados por la cantidad de años que llevan:
¿Recomiendas aprender con esos cursos (me refiero a los de rwd, desarrollo web, HTML, etc), a pesar de que son bastantes viejos? si es así, ¿por qué?
¿piensas actualizar los cursos que tienes en TH-cam?.
Saludos desde colombia.
SIguen siendo vigente ya que siguen dandote las bases, por el momento no pienso renovarlos ya qque terminando el de JS pienso seguir con Webpack, Grid CSS, React, Bootstrap, Firebase... etc
@@jonmircha ¿todos esos cursos serán gratis o de pago en alguna plataforma?
@@levissuarez1325 Sï
Doy fe que sirven y mucho, al menos los de php y HTML que son los que vi, tal vez aparecieron nuevas herramientas, pero con las bases que sientan los cursos estamos en condiciones de aprenderlas por nuestra cuenta
Jon-Geminis , Esa animacion es del Zorrito de su pagina web?
cuál ?
Buenas tardes profesor. Estuve leyendo la plan de cursos referidos en la repuesta al usuario Levis Suerez y no comenta nada sobre base de datos, no cree conveniente un cursito de este tipo.
Firebase es Base de Datos :)
la api de formsubmit es muy poco intuitiva tiene muy coco documentación pero casi termino
:O es sencillísima
tengo problemas con el formData 👉 github.com/Sergio1902/JAVASCRIPT/tree/master/EJERCICIOS-AJAX/05-UPLOADER-DRAG-DROP alguna sugerencia maestro :(
👏👏👏 🙏🙏🙏
👋🏻😉