1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!doctype html>
<html lang="fr">
<head>
<!--meta charset="utf-8"-->
<title>TEST SLIDE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.fondd {
border:1px solid green;
background: linear-gradient(to bottom, rgba(220,220,220, 0) 44%, rgba(255, 255, 255, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220,220,220, 0) 63%);
margin-top:3px;
user-select: none;
}
.cur {
background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
user-select: none;
}
.cur2{
background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50,0,1) 50%, rgba(240, 240, 0, 1) 100%);
}
</style>
<script type= "text/javascript">
var largeur;
var sl;
var curseur;
var oldX;
var newX;
var moinsX;
var divi;
function dragStart(event) {
console.log(event.target.id);
if(curseur===null){
curseur = event.target;///curseur c'est bien toi t'es la??
curseur.className=("cur2");// il aura plus de classe comme ca:):)
var dragg = curseur.parentElement;
largeur = curseur.parentElement.offsetWidth - (curseur.offsetWidth/2 );
divi = (largeur-(curseur.offsetWidth/2 )) / 100 ;
oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
moinsX = oldX - curseur.offsetLeft;
}
}
function dragging(event) {
if (curseur!=null) {
newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
console.log("deplacement " + newX);
var posX = newX - moinsX;
if (posX < 0) {
posX = 0;
//return false
}
if (posX > largeur - (curseur.offsetWidth / 2)) {
posX = largeur - (curseur.offsetWidth / 2);
}
curseur.style.position = "absolute";
curseur.style.left = posX + "px";
document.getElementById("res").innerHTML =curseur.id+" : " + Math.round(curseur.offsetLeft / divi);
}
}
function relache(event) {
console.log(" par event "+ event.target.id);//voir dans la console si il est bien identifié
console.log("par la variable curseur "+ curseur.id);//voir dans la console si il est bien identifié
console.log(" mais ou qu'il est donc parti celui la ");
//////event.target.childNodes[0].className=("cur");//marche pas
curseur.className="cur";//beep beep circulez y a rien a voir
curseur = null;// beep beep ca change pas grand chose on sait pas qui c'est ce satané curseur
}
function ajoute() {
curseur1.addEventListener("mousedown", dragStart, false);//heu.. curseur1 qui??? vous avez dit ???
curseur2.addEventListener("mousedown", dragStart, false);//idem
curseur3.addEventListener("mousedown", dragStart, false);//idem
curseur4.addEventListener("mousedown", dragStart, false);//idem
document.getElementById("fond1").addEventListener("mousemove", dragging, false);
document.getElementById("fond3").addEventListener("mousemove", dragging, false);
document.getElementById("fond2").addEventListener("mousemove", dragging, false);
document.getElementById("fond4").addEventListener("mousemove", dragging, false);
document.getElementById("fond1").addEventListener("mouseup", relache, false);
document.getElementById("fond2").addEventListener("mouseup", relache, false);
document.getElementById("fond3").addEventListener("mouseup", relache, false);
document.getElementById("fond4").addEventListener("mouseup", relache, false);
document.getElementById("fond1").addEventListener("mouseleave", relache, false);
document.getElementById("fond2").addEventListener("mouseleave", relache, false);
document.getElementById("fond3").addEventListener("mouseleave", relache, false);
document.getElementById("fond4").addEventListener("mouseleave", relache, false);
}
</script>
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
un slide pas comme les autre
<p id ="res">position</p>
<br/><br/>
<div id="fond1" class="fondd" style="position:relative;width:200px;height:26px;overflow:none;">
<div id="curseur1" class="cur" style="position:absolute;top:5px;width:16px;height:16px;border-radius:8px;" unselectable="on"></div>
</div>
<div id="fond2" class="fondd" style="position:relative;width:300px;height:26px;overflow:none;" >
<div id="curseur2" class="cur" style="position:absolute;top:5px;width:26px;height:16px;border-radius:8px;" unselectable="on"></div>
</div>
<div id="fond3" class="fondd" style="position:relative;width:300px;height:26px;overflow:none;">
<div id="curseur3" class="cur" style="position:absolute;top:5px;width:10px;height:16px;border-radius:8px;" unselectable="on"></div>
</div>
<div id="fond4" class="fondd" style="position:relative;width:110px;height:26px;overflow:none;">
<div id="curseur4" class="cur" style="position:absolute;top:5px;width:16px;height:16px;border-radius:8px;" unselectable="on"></div>
</div>
</div>
<script>ajoute();</script>
</body>
</html> |
