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
As we can see from HTML/CSS, the slider is a `<div>`with a colored background, that contains a runner -- another `<div>`with`position:relative`.
1
+
Como podemos ver en el HTML/CSS, la barra de desplazamiento es un `<div>`con un fondo de color, que contiene un pasador: otro `<div>`con`position:relative`.
2
2
3
-
To position the runner we use `position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than`position:absolute`.
3
+
Para posicionar el pasador usamos `position:relative`, para proveer las coordenadas relativas a su padre, aquí es más conveniente que`position:absolute`.
4
4
5
-
Then we implement horizontal-only Drag'n'Drop with limitation by width.
5
+
En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@ importance: 5
2
2
3
3
---
4
4
5
-
# Slider
5
+
# Control deslizante
6
6
7
-
Create a slider:
7
+
Crea un control deslizante:
8
8
9
9
[iframe src="solution" height=60 border=1]
10
10
11
-
Drag the blue thumb with the mouse and move it.
11
+
Arrastra el pasador azul con el ratón y muévelo.
12
12
13
-
Important details:
13
+
Detalles importantes:
14
14
15
-
-When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
16
-
-If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
15
+
-Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
16
+
-Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute`to lay the element into the document.
1
+
Para arrastrar el elemento podemos usar `position:fixed`, esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a `position:absolute`para fijar el elemento en el documento.
2
2
3
-
When coordinates are at window top/bottom, we use `window.scrollTo`to scroll it.
3
+
Cuando las coordinadas están en el tope/fondo de la ventana, usamos `window.scrollTo`para desplazarla.
0 commit comments