Ik ben bezig met het maken van een pagina waarop men de volgorde / positie van een aantal onderwerpen kan bepalen door div's te verslepen. Het is hierbij de bedoeling dat de andere div's verschuiven wanneer de verplaatste div op hun locatie komt (en zij dus ruimte moeten maken).
Ik heb het volgende gemaakt:
Index.html (in een latere versie is het de bedoeling dat dit een php pagina wordt die het aantal div's om te verplaatsen af laat hangen van het aantal records in de DB (nu vastgesteld op 5 div's)):
Stijl.css:
En verplaatser.js:
Wanneer je index.html in je browser opent werkt het verplaatsen van de eerste div goed, en maken de andere div's goed plaats. Echter licht het probleem in het verplaatsen van de andere div's.
Heeft iemand enig idee wat er verbeterd moet worden?
Ik heb het volgende gemaakt:
Index.html (in een latere versie is het de bedoeling dat dit een php pagina wordt die het aantal div's om te verplaatsen af laat hangen van het aantal records in de DB (nu vastgesteld op 5 div's)):
code:
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
| <html>
<head>
<link rel="stylesheet" href="stijl.css" type="text/css">
<script type="text/javascript" src="verplaatser.js"></script>
</head>
<body onLoad="posities_toekennen('5')">
<!-- Verborgen div om hoogte's van de posities vast te stellen: -->
<div id='posities' class='verborgenposities'></div>
<!-- // -->
<!-- Verplaatsbare div's -->
<div id='1' class='verplaatsbarediv' style='background-color: pink; z-index: 1;' onMouseDown="divID(1, 5); e = new mo(); e.geklicked();" onMouseUp="e.losgelaten(); e = null;">div1</div>
<div id='2' class='verplaatsbarediv' style='background-color: lightblue; z-index: 1;' onMouseDown="divID(2, 5); e = new mo(); e.geklicked();" onMouseUp="e.losgelaten(); e = null;">div2</div>
<div id='3' class='verplaatsbarediv' style='background-color: yellow; z-index: 1;' onMouseDown="divID(3, 5); e = new mo(); e.geklicked();" onMouseUp="e.losgelaten(); e = null;">div3</div>
<div id='4' class='verplaatsbarediv' style='background-color: green; z-index: 1;' onMouseDown="divID(4, 5); e = new mo(); e.geklicked();" onMouseUp="e.losgelaten(); e = null;">div4</div>
<div id='5' class='verplaatsbarediv' style='background-color: purple; z-index: 1;' onMouseDown="divID(5, 5); e = new mo(); e.geklicked();" onMouseUp="e.losgelaten(); e = null;">div5</div>
<!-- // -->
<!-- Div voor plekindicatie bij verplaatsen -->
<div id="plekindicatie" class="plekindicatie"></div>
<!-- // -->
</body>
</html> |
Stijl.css:
code:
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
| .positiediv{
cursor: move;
width: 800px;
height: 20px;
background-color: #E5E5E5;
position: absolute;
}
.verborgenposities{
visibility: visible;
}
.verplaatsbarediv{
cursor: move;
width: 500px;
height: 20px;
background-color: #FFFF33;
position: absolute;
}
.plekindicatie{
width: 496px;
height: 16px;
z-index: 10;
border-style: dashed;
border-width: 2px;
border-color: #888888;
position: absolute;
visibility: hidden;
} |
En verplaatser.js:
code:
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
| ////////////////////////////
// Verplaatsen div:
///////////////////////////
function posities_toekennen(aantal){
hoogtedivs = 25;
starthoogte = 10;
afstandlinks = 10;
this.hoogtedezediv = starthoogte;
this.loopje = 1;
while(this.loopje <= aantal){
//Virtuele posities:
oudecontent = document.getElementById("posities").innerHTML;
extracontent = "<div id='positie" + this.loopje + "'class='positiediv' style='top: " + this.hoogtedezediv + ";'></div>";
document.getElementById("posities").innerHTML = oudecontent + extracontent;
//Posities aan div's geven bij eerste keer laden:
document.getElementById(this.loopje).style.top = this.hoogtedezediv;
document.getElementById(this.loopje).style.left = afstandlinks;
//Loopje:
this.hoogtedezediv = this.hoogtedezediv + hoogtedivs;
this.loopje++;
}
}
function divID(id, aantal){
div_id = id;
aantal_divs = aantal;
//De Z-index aanpassen:
this.huidigezdiv = document.getElementById(div_id).style.zIndex;
document.getElementById(div_id).style.zIndex = huidigezdiv + 1;
//De te verplaatsen div transparant maken:
document.getElementById(div_id).style.opacity = 0.6;
document.getElementById(div_id).style.filter = 'alpha(opacity=60)';
}
function mo(){
this.mover = null;
}
mo.prototype.geklicked = function() {
this.mover = new mover;
document.onmousemove = this.mover.move;
//De Plekindicator De huidige positie van de div geven:
document.getElementById("plekindicatie").style.visibility = "visible";
document.getElementById("plekindicatie").style.visibility.left = afstandlinks;
document.getElementById("plekindicatie").style.top = document.getElementById(div_id).style.top;
}
mo.prototype.losgelaten = function() {
this.mover = null;
document.onmousemove = null;
document.getElementById(div_id).style.opacity = 1;
document.getElementById(div_id).style.filter = 'alpha(opacity=100)';
this.huidigezdiv = document.getElementById(div_id).style.zIndex;
document.getElementById(div_id).style.zIndex = huidigezdiv - 1;
}
function mover() {
this.divx = null;
this.divy = null;
}
mover.prototype.move = function(e) {
//Aanpassen x en y positie div tijdens bewegen muis:
var posx = 0;
var posy = 0;
if (!e){
var e = window.event;
}
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
var floatdiv = document.getElementById(div_id);
if (!this.divx){
this.divx = posx - parseInt(floatdiv.style.left);
this.divy = posy - parseInt(floatdiv.style.top);
}
floatdiv.style.top = posy - this.divy;
floatdiv.style.left = posx - this.divx;
//De virtuele positie's ophalen en de plekindicatie erop aanpassen:
this.loopje = 1;
while(this.loopje <= aantal_divs){
this.hoogtepositiediv = parseInt(document.getElementById("positie" + this.loopje).style.top);
this.hoogtediv = parseInt(floatdiv.style.top);
this.huidigehoogteplekindicatie = parseInt(document.getElementById("plekindicatie").style.top);
if(this.hoogtepositiediv - this.hoogtediv <= 0){
//Positie van de plekindicator en van de div die verplaatst moet worden bepalen:
this.loopje2 = 1;
while(this.loopje2 <= aantal_divs){
this.positieonzichtbarediv = parseInt(document.getElementById("positie" + this.loopje2).style.top);
if(this.positieonzichtbarediv - this.huidigehoogteplekindicatie <= 0){
this.positieplekindicatie = this.loopje2; //Positie van de plekindicatie is bekend
}
this.topdezediv = parseInt(document.getElementById(this.loopje).style.top);
if(this.positieonzichtbarediv - this.topdezediv <= 0){
this.positieteveranderendiv = this.loopje2;
}
this.loopje2++;
}
//De div op de nieuwe locatie van de plekindicatie naar de oude verschuiven:
if((this.positieplekindicatie) && (this.positieteveranderendiv)){
//Div ID ophalen die bij te te veranderen positie hoort:
this.hoogteteveranderendiv = parseInt(document.getElementById("positie" + this.positieteveranderendiv).style.top);
this.loopje3 = 1;
while(this.loopje3 <= aantal_divs){
this.temp = parseInt(document.getElementById(this.loopje3).style.top);
if(this.temp - this.hoogteteveranderendiv <= 0){
if(this.hoogteteveranderendiv != this.huidigehoogteplekindicatie){
this.verschuifactie_id = this.loopje3;
this.verschuifactie_loc = this.huidigehoogteplekindicatie;
document.getElementById("plekindicatie").innerHTML = "<img width='150' height='0' border='0'>Div " + this.loopje3 + " naar de hoogte van virtuele positie: " + this.positieplekindicatie;
}
}
this.loopje3++;
}
}
//Plekindicatie verschuiven:
document.getElementById("plekindicatie").style.top = this.hoogtepositiediv;
//Andere div's verschuiven:
document.getElementById(this.verschuifactie_id).style.top = this.verschuifactie_loc;
}
this.loopje++;
}
}
////////////////////////////////// |
Wanneer je index.html in je browser opent werkt het verplaatsen van de eerste div goed, en maken de andere div's goed plaats. Echter licht het probleem in het verplaatsen van de andere div's.
Heeft iemand enig idee wat er verbeterd moet worden?
:strip_exif()/u/138622/kikker.gif?f=community)
/u/154121/opeth-avatar.png?f=community){kind=avatar}