Drag drop in OnMouseMove
Zie bijvoorbeeld deze tutorial.
Ik heb het uitgeprobeerd, alles werkt, maar nu een id meegeven.
Dit heb ik al geprobeerd
Code (php)
1
2
2
<div class="drag"><script type="text/javascript">var theId = 1;</script>Testing</div>
<div class="drag"><script type="text/javascript">var theId = 2;</script>test</div>
<div class="drag"><script type="text/javascript">var theId = 2;</script>test</div>
En dan in de onmouseup van het scriptje
Code (php)
1
alert(theId);
Nu toont hij ALTIJD 1, dus ik moet het uniek maken. Hoe doe ik dit?
Gewijzigd op 05/09/2010 14:17:49 door - Raoul -
Wat heb je zelf al (geprobeerd)?
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
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
<div onmousedown="dragstart(this)">Taart!</div>
<div onmousedown="dragstart(this)">Pizza!</div>
var currently_dragged_element;
function dragstart(element)
{
currently_dragged_element = element;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
<div onmousedown="dragstart(this)">Pizza!</div>
var currently_dragged_element;
function dragstart(element)
{
currently_dragged_element = element;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
dragdrop.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
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
var currently_dragged_element;
function dragstart(element)
{
currently_dragged_element = element;
var hetelement = document.getElementById(element);
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
if (e == null)
var e = window.event;
// this is the actual "drag code"
hetelement.style.left = (_offsetX + e.clientX - _startX) + 'px';
hetelement.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
function dragstart(element)
{
currently_dragged_element = element;
var hetelement = document.getElementById(element);
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
if (e == null)
var e = window.event;
// this is the actual "drag code"
hetelement.style.left = (_offsetX + e.clientX - _startX) + 'px';
hetelement.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
test.php
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<style type="text/css">
.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
</style>
<div class="drag" onmousedown="dragstart(this)">Taart!</div>
<div class="drag" onmousedown="dragstart(this)">Pizza!</div>
<pre id="debug"></pre>
<script src="/js/drag_drop/dragdrop.js" type="text/javascript"></script>
.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
</style>
<div class="drag" onmousedown="dragstart(this)">Taart!</div>
<div class="drag" onmousedown="dragstart(this)">Pizza!</div>
<pre id="debug"></pre>
<script src="/js/drag_drop/dragdrop.js" type="text/javascript"></script>
Code (php)
1
var hetelement = document.getElementById(element);
Dit is niet nodig, want 'this' in een onblabla attribuut verwijst naar het element waarop het van toepassing is. Dus element != een id, en je hoeft het element helemaal niet op te halen, je hebt het al. Het zit nu in currently_dragged_element. Je kan toch wel een beetje Engels, toch?
Code (php)
1
2
2
if (e == null)
var e = window.event;
var e = window.event;
Idd, Internet explorer zou dat wel eens nodig kunnen hebben. Maar 'var' moet je weglaten, want 'e' is al een bestaande variabele.
Code (php)
1
2
3
2
3
// this is the actual "drag code"
hetelement.style.left = (_offsetX + e.clientX - _startX) + 'px';
hetelement.style.top = (_offsetY + e.clientY - _startY) + 'px';
hetelement.style.left = (_offsetX + e.clientX - _startX) + 'px';
hetelement.style.top = (_offsetY + e.clientY - _startY) + 'px';
1. hetelement bestaat niet binnen deze functie. Dat was een lokale variabele die je in de dragstart had aangemaakt, en die bestaat dan ook alleen binnen die functie.
2. hetelement moet dan worden currently_dragged_element, wat wel bestaat, want dat heb ik immers gedefinieerd buiten de functies helemaal bovenaan mijn voorbeeldje zodat ik ze in al die functies kan gebruiken, en ik heb bij dragstart() daar het element in gestopt.
3. _offsetX en _startX bestaan niet. Die moet je waarschijnlijk net als currently_dragged_element even buiten de functies definieren en bij dragstart() vullen met de juiste waarden.
Mijn code nu btw
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
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
var currently_dragged_element;
function dragstart(element)
{
currently_dragged_element = element;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
if (e == null)
e = window.event;
// this is the actual "drag code"
currently_dragged_element.style.left = (_offsetX + e.clientX - _startX) + 'px';
currently_dragged_element.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
function dragstart(element)
{
currently_dragged_element = element;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen. Zie die tutorial bijvoorbeeld
if (e == null)
e = window.event;
// this is the actual "drag code"
currently_dragged_element.style.left = (_offsetX + e.clientX - _startX) + 'px';
currently_dragged_element.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var currently_dragged_element, _offsetX, _offsetY, _startX, _startY;
function dragstart(element)
{
currently_dragged_element = element;
_offsetX = 0;
_offsetY = 0;
_startX = 0;
_startY = 0;
}
function dragstart(element)
{
currently_dragged_element = element;
_offsetX = 0;
_offsetY = 0;
_startX = 0;
_startY = 0;
}
Kijk nu nog eens naar die tutorial bij hun OnMouseDown functie, en zie waar zij de waarden van die variabelen vandaan halen. Vul nu eens _offsetX en _offsetY in.
Ok, dat werkt al iets beter, maar nu is het nog raar, want de muis verspringt. Daar is _startX en _startY voor blijkbaar. Maar om die te pakken heb je event nodig, dus moet je naast 'this' ook een tweede 'event' parameter maken zoals dragmove die gebruikt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function dragstart(element, e)
{
// voor internet explorer
if(!e)
e = window.event;
...
_startX = ...?
_startY = ...?
}
{
// voor internet explorer
if(!e)
e = window.event;
...
_startX = ...?
_startY = ...?
}
en natuurlijk moet je hem nog even meegeven
Code (php)
1
<div onmousedown="dragstart(this, event)">Taart!</div>
alleen de muis verspringt , ik heb dit gedaan
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
48
49
50
51
52
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
var currently_dragged_element;
function dragstart(element, e)
{
// voor internet explorer
if(!e)
e = window.event;
currently_dragged_element = element;
_offsetX = 0;
_offsetY = 0;
_startX = 0;
_startY = 0;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen.
if (e == null)
e = window.event;
// hiermee draggen we
currently_dragged_element.style.left = (_offsetX + e.clientX - _startX) + 'px';
currently_dragged_element.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
function dragstart(element, e)
{
// voor internet explorer
if(!e)
e = window.event;
currently_dragged_element = element;
_offsetX = 0;
_offsetY = 0;
_startX = 0;
_startY = 0;
}
function dragmove(e)
{
// Er is geen element opgepakt, dus we hoeven niets te doen
if(!currently_dragged_element)
return;
// doe iets om de positie van currently_dragged_element
// aan de hand van de coordinaten in e
// ergens heen te slepen.
if (e == null)
e = window.event;
// hiermee draggen we
currently_dragged_element.style.left = (_offsetX + e.clientX - _startX) + 'px';
currently_dragged_element.style.top = (_offsetY + e.clientY - _startY) + 'px';
//_debug.innerHTML = '(' + hetelement.style.left + ', ' + hetelement.style.top + ')';
}
function dragstop()
{
// als er geen element wordt gesleept, doe niets
if(!currently_dragged_element)
return;
// er is een element opgepakt, en de muis wordt losgelaten.
// Dus laat het element weer vallen, want we slepen niet meer.
currently_dragged_element = null;
}
window.onmousemove = dragmove;
window.onmouseup = dragstop;
en heb verschillende keren geprobeerd de _startX en Y op een bepaald getal te zetten, maar geen verschil.. hoe moet ik dit nu doen?
Als dit werkt, werkt mn scriptje,
nogmaal thx he!