Drag & drop JS
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
43
44
45
46
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
<html>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementById("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div id="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div id="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementById("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div id="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div id="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
Dit gaat niet goed , als ik 2 ids erbij doe gaat het mis.
Hoe kan ik dit oplossen?
En waarom gebruik je geen jQuery ervoor?
Gewijzigd op 22/08/2010 23:38:52 door - Ariën -
Code (php)
1
2
2
<div class="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
En je moet dan nog even je JS-code aanpassen dat het getElementByClass doet. (of in jQuery $.DragDiv)
Gewijzigd op 22/08/2010 23:41:10 door - Ariën -
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
43
44
45
46
47
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
<html>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementByClass("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
</html>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementByClass("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
</html>
En waarom gebruik je geen jQuery? In mijn ogen werkt het veel handiger...
Gewijzigd op 22/08/2010 23:47:34 door - Ariën -
Kan ik in jQuery een id koppelen? Ik kan nl. geen plugins aanpassen.
Kan ik ook de xy ontvangen?
Uncaught TypeError: Object #<an HTMLDocument> has no method 'getElementByClass
Gewijzigd op 23/08/2010 00:15:04 door - Raoul -
Uncaught TypeError: Object #<an HTMLDocument> has no method 'getElementByClass
Gewijzigd op 24/08/2010 00:18:39 door - Raoul -
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
43
44
45
46
47
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
<html>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementsByClassName("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
</html>
<head>
<style type="text/css">
#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
</style>
<script type="text/javascript">
var DragDiv;
var Dragging = false;
window.onload = function()
{
DragDiv = document.getElementsByClassName("DragDiv");
DragDiv.onmousedown = function()
{
Dragging = true;
}
}
document.onmousemove = function(e)
{
if (!e) e = window.event;
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
document.getElementById(id).value = e.clientY+" en "+e.clientX;
}
}
document.onmouseup = function()
{
Dragging = false;
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="DragDiv"><script type="text/javascript">var id=1;</script>Versleep<input type="text" id="1"></div>
<div class="DragDiv"><script type="text/javascript">var id=2;</script>Versleep 2<input type="text" id="2"></div>
</body>
</html>
Maar werkt ook niet =S
Bedenk je trouwens wel dat clientX en clientY de positie van de muis ten opzichte van het scherm zijn, en niet ten opzichte van de pagina. Dus als je je pagina naar beneden scrollt, kloppen de posities al niet meer. (tenzij je weer position:fixed gebruikt, wat wederom niet in Internet Explorer werkt)
Op Quirksmode staat een goed artikel hierover.
Vreemd genoeg geeft de error console NIKS =S=S
Heeft er iemand een scriptje waar ik een id kan aankoppelen?
Gewijzigd op 25/08/2010 00:46:46 door - Raoul -
