Skip to content

Commit 1332ed2

Browse files
authored
Merge pull request #470 from joaquinelio/dragrat
dragrat
2 parents edf7335 + ef0e85d commit 1332ed2

File tree

3 files changed

+9
-9
lines changed

3 files changed

+9
-9
lines changed

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importancia: 5
1+
importance: 5
22

33
---
44

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importancia: 5
1+
importance: 5
22

33
---
44

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ En el estándar moderno de HTML hay una [sección sobre Arrastrar y Soltar](http
66

77
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.
88

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.
1010

1111
Así que aquí veremos cómo implementar "Arrastrar y Soltar" usando eventos del ratón.
1212

1313
## Algoritmo de "Arrastrar y Soltar"
1414

1515
El algoritmo básico de Arrastrar y Soltar se ve así:
1616

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.
2020

2121
Esto es lo básico. Luego veremos como añadir características, como resaltar los elementos subyacentes mientras arrastramos sobre ellos.
2222

@@ -28,7 +28,7 @@ ball.onmousedown = function(event) {
2828
ball.style.position = 'absolute';
2929
ball.style.zIndex = 1000;
3030

31-
// moverlo fuera de cualquier padre actual directamente en el body
31+
// quitar cualquier padre actual y moverlo directamente a body
3232
// para posicionarlo relativo al body
3333
document.body.append(ball);
3434

@@ -260,8 +260,8 @@ function onMouseMove(event) {
260260
if (currentDroppable != droppableBelow) {
261261
// estamos flotando dentro o afuera
262262
// nota: ambos valores puden ser null
263-
// currentDroppable=null si no estábamos sobre un receptor antes de éste evento (ej. sobre un espacio en blanco)
264-
// droppableBelow=null si no estamos sobre un receptor ahora, durante éste evento
263+
// currentDroppable=null si no estábamos sobre un receptor antes de este evento (ej. sobre un espacio en blanco)
264+
// droppableBelow=null si no estamos sobre un receptor ahora, durante este evento
265265
266266
if (currentDroppable) {
267267
// la lógica para procesar "flying out" del receptor (elimina el resaltado)

0 commit comments

Comments
 (0)