You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/4-mouse-drag-and-drop/article.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -6,17 +6,17 @@ En el estándar moderno de HTML hay una [sección sobre Arrastrar y Soltar](http
6
6
7
7
Estos eventos nos permiten soportar tipos especiales de Arrastrar y Soltar, como manejar el arrastrado de archivos desde el manejador de archivos del Sistema Operativo y soltarlo en la ventana del navegador. Así JavaScript puede acceder al contenido de dichos archivos.
8
8
9
-
Pero los eventos de arrastrar también tienen limitaciones. Por ejemplo, no podemos evitar el arrastre desde cierta área. Tampoco podemos hacer que el arrastre solo "horizontal" o "vertical". Y hay muchas otras tareas de "Arrastrar y Soltar" que no pueden hacerse utilizándolos. También, el soporte para dispositivos móviles para dichos eventos, es muy pobre.
9
+
Pero los eventos nativos de arrastrar tienen limitaciones. Por ejemplo, no nos deja evitar el arrastre desde cierta área. Tampoco podemos hacer que el arrastre sea solamente "horizontal" o "vertical". Y hay muchas otras tareas de "Arrastrar y Soltar" que no pueden hacerse utilizándolos. Además, el soporte para dichos eventos es muy pobre en dispositivos móviles.
10
10
11
11
Así que aquí veremos cómo implementar "Arrastrar y Soltar" usando eventos del ratón.
12
12
13
13
## Algoritmo de "Arrastrar y Soltar"
14
14
15
15
El algoritmo básico de Arrastrar y Soltar se ve así:
16
16
17
-
1.Con un `mousedown` - preparar el elemento para moverlo, si es necesario (quiza crear un clon de este, añadirle una clase o lo que sea).
18
-
2.Entonces con `mousemove` moverlo cambiando `left/top` con `position:absolute`.
19
-
3.Con`mouseup` - realizar todas las acciones relacionadas con finalizar el Arrastrar y Soltar.
17
+
1.En `mousedown` - preparar el elemento para moverlo, si es necesario (quizá creando un clon de este, añadiéndole una clase, o lo que sea).
18
+
2.En `mousemove` - moverlo cambiando `left/top` con `position:absolute`.
19
+
3.En`mouseup` - realizar todas las acciones relacionadas con finalizar el Arrastrar y Soltar.
20
20
21
21
Esto es lo básico. Luego veremos como añadir características, como resaltar los elementos subyacentes mientras arrastramos sobre ellos.
0 commit comments