Js wordt maar 1x uitgevoerd
Het probleem is dat de div maar 1x kan worden verplaatst. Als er eenmaal op is geklikt en de muis heeft bewogen werkt het niet meer. En het is de bedoeling dat de div altijd verplaatsbaar is.
De browser die ik gebruik is IE 9
Code (php)
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
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
<html>
<head>
<script>
function verplaats(div) {
drag = div;
links = event.clientX - document.getElementById(drag).style.left;
boven = event.clientY - document.getElementById(drag).style.top;
}
function uit() {
drag = "";
links = "";
boven = "";
}
function move() {
if(drag != "") {
document.getElementById(drag).style.left=event.clientX - links;
document.getElementById(drag).style.top=event.clientY - boven;
}
}
</script>
<style>
#heleDiv {
width: 110px;
height: 110px;
border: 1px solid lightgrey;
position: absolute;
}
#verplaatsbalk {
width: 100px;
height: 20px;
border: 1px solid lightgrey;
margin: 4px;
}
</style>
</head>
<body onmousemove="move()" onclick="uit()">
<div id="heleDiv">
<div id="verplaatsbalk" onmousedown="verplaats('heleDiv'); return false">
Verplaatsbaar
</div>
</div>
</body>
<head>
<script>
function verplaats(div) {
drag = div;
links = event.clientX - document.getElementById(drag).style.left;
boven = event.clientY - document.getElementById(drag).style.top;
}
function uit() {
drag = "";
links = "";
boven = "";
}
function move() {
if(drag != "") {
document.getElementById(drag).style.left=event.clientX - links;
document.getElementById(drag).style.top=event.clientY - boven;
}
}
</script>
<style>
#heleDiv {
width: 110px;
height: 110px;
border: 1px solid lightgrey;
position: absolute;
}
#verplaatsbalk {
width: 100px;
height: 20px;
border: 1px solid lightgrey;
margin: 4px;
}
</style>
</head>
<body onmousemove="move()" onclick="uit()">
<div id="heleDiv">
<div id="verplaatsbalk" onmousedown="verplaats('heleDiv'); return false">
Verplaatsbaar
</div>
</div>
</body>
Toevoeging op 22/05/2012 16:53:15:
Hoe kan dat? variabele drag wordt toch steeds ge'update doordat de functie "verplaats()" opnieuw wordt uitgevoerd?
Code (php)
1
2
3
2
3
var drag,
links,
boven;
links,
boven;
Meer informatie: http://bonsaiden.github.com/JavaScript-Garden/#function.scopes
Gewijzigd op 22/05/2012 17:10:04 door Wouter J
Ik denk dat ik maar beter op internet een script kan zoeken dat wel werkt.
er staat nu aleen nog in de body tag onmousemove="move()"
De functie "uit()" is uit het javascript gehaald en onclick="uit()" is ook uit de body tag gehaald.
Als je nu de div verplaatst blijft hij aan je muis plakken, blijft hij de muis volgen en kun je hem niet meer loslaten. Hoe moet ik dit nu oplossen? moet ik een variabele maken die kan bepalen of de div verplaatsbaar is of niet verplaatsbaar is?