Skip to content

Commit 8272df8

Browse files
Samuel-AmaroSamuel-Amaro
committed
exercicio sobre api dom, sobre drag é drop com eventos do mouse
1 parent 6040dbb commit 8272df8

File tree

2 files changed

+79
-0
lines changed

2 files changed

+79
-0
lines changed

‎EXE_API_DOM/field.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎EXE_API_DOM/slider.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<style>
6+
.slider {
7+
border-radius: 5px;
8+
background: #E0E0E0;
9+
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
10+
width: 310px;
11+
height: 15px;
12+
margin: 5px;
13+
}
14+
15+
.thumb {
16+
width: 10px;
17+
height: 25px;
18+
border-radius: 3px;
19+
position: relative;
20+
/*left: 10px;*/
21+
top: -5px;
22+
background: blue;
23+
cursor: pointer;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
29+
<div id="slider" class="slider">
30+
<div class="thumb"></div>
31+
</div>
32+
33+
<script type="text/javascript">
34+
/**
35+
* * SLIDER(CONTROLE DESLIZANTE)
36+
*
37+
* Crie um controle deslizante:
38+
*
39+
* Arraste o polegar azul com o mouse e mova-o.
40+
*
41+
* Detalhes importantes:
42+
*
43+
* Quando o botão do mouse é pressionado, ao arrastar o mouse pode passar por cima ou por baixo do controle deslizante. O controle deslizante ainda funcionará (conveniente para o usuário).
44+
*
45+
* Se o mouse se mover muito rápido para a esquerda ou para a direita, o polegar deve parar exatamente na borda.
46+
*/
47+
48+
let thumbElem = document.querySelector(".thumb");
49+
let sliderElem = document.querySelector(".slider");
50+
let coordSlider = sliderElem.getBoundingClientRect();
51+
52+
//pressiona botão do mouse sobre thumb
53+
thumbElem.addEventListener("mousedown", (event) => {
54+
event.preventDefault();
55+
//local exato do mouse no thumb
56+
let shiftX = event.clientX - sliderElem.getBoundingClientRect().left;
57+
function moveAt(clientX) {
58+
//so se posiciona na direção horizontal
59+
//dentro dos limites do slider
60+
if(clientX >= coordSlider.left && clientX <= coordSlider.left + sliderElem.clientWidth - thumbElem.clientWidth - sliderElem.clientLeft) {
61+
thumbElem.style.left = clientX - shiftX + 'px';
62+
}
63+
}
64+
function mouseMove(event) {
65+
moveAt(event.clientX, event.clientY);
66+
}
67+
//obtem cada movimentação do mouse dentro do slider
68+
sliderElem.addEventListener("mousemove", mouseMove);
69+
70+
thumbElem.addEventListener("mouseup", (event) => {
71+
thumbElem.removeEventListener("mousemove", mouseMove);
72+
thumbElem.onmouseup = null;
73+
});
74+
});
75+
76+
77+
</script>
78+
</body>

0 commit comments

Comments
 (0)