Locatie onthouden van dragdrop
Hoe doe ik dat?
Daarbij is het ook belangrijk dat de positie kan worden opgeslagen in een database als er wordt geklikt op een knop
De positie mag niet worden opgeslagen in een cookie
Het script dat ik nu heb: (dit hele script hoort in de <body>)
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
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
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
<!-- Begin van de code -->
<script language="JavaScript1.2">
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
var dragapproved=false
function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}
function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
if (document.all){
document.onmouseup=new Function("dragapproved=false")
}
function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}
</script>
<div id="showimage" style="position: absolute; width: 250; left: 284; top: 55; height: 118">
<table border="0" width="250" bgcolor="#000000" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="1" width="100%" cellspacing="0" cellpadding="0"
height="36" bordercolor="#CCFFCC" bordercolorlight="#CCFFCC" bordercolordark="#CCFFCC" bgcolor="#000000">
<tr>
<td onMousedown="initializedragie()" style="cursor:hand" width="100%" bgcolor="#0033FF">
<p align="center"><font color="#000000"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"><strong><small>
Welkom!</small></strong></font></layer></ilayer></font></p>
</td>
<td style="cursor:hand" bgcolor="#008000"><a href="#" onClick="hidebox();return false"><font size="2" color="#000000">Sluiten</font></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#404040" style="padding:4px" colspan="2" bordercolorlight="#CCFFCC" bordercolordark="#CCFFCC" bordercolor="#CCFFCC">
<font color="#00FF00"><small>Welkom</small></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
<!-- Einde van de code -->
<script language="JavaScript1.2">
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
var dragapproved=false
function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}
function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
if (document.all){
document.onmouseup=new Function("dragapproved=false")
}
function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}
</script>
<div id="showimage" style="position: absolute; width: 250; left: 284; top: 55; height: 118">
<table border="0" width="250" bgcolor="#000000" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="1" width="100%" cellspacing="0" cellpadding="0"
height="36" bordercolor="#CCFFCC" bordercolorlight="#CCFFCC" bordercolordark="#CCFFCC" bgcolor="#000000">
<tr>
<td onMousedown="initializedragie()" style="cursor:hand" width="100%" bgcolor="#0033FF">
<p align="center"><font color="#000000"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"><strong><small>
Welkom!</small></strong></font></layer></ilayer></font></p>
</td>
<td style="cursor:hand" bgcolor="#008000"><a href="#" onClick="hidebox();return false"><font size="2" color="#000000">Sluiten</font></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#404040" style="padding:4px" colspan="2" bordercolorlight="#CCFFCC" bordercolordark="#CCFFCC" bordercolor="#CCFFCC">
<font color="#00FF00"><small>Welkom</small></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
<!-- Einde van de code -->
Gewijzigd op 27/02/2012 16:55:16 door Jan terhuijzen
Is het ook op te lossen op een amateuristische manier?
De positie wordt in een value van een <input type="hidden"> gedaan en als het formulier wordt verzonden met een submitknop kun je zo met $_POST de positie in de database zetten.
Gewijzigd op 27/02/2012 17:01:17 door jan terhuijzen
Het is een soort pagina van een account van elke gebruiker. hij kan alles verplaatsen, tekst erop zetten, enz. en als de gebruiker op opslaan klikt wordt het pas opgeslagen er is ook eel annuleer knop
Gewijzigd op 27/02/2012 17:10:07 door jan terhuijzen
Jan terhuijzen op 27/02/2012 16:59:11:
... positie wordt in een value van een <input type="hidden"> gedaan ...
Ja, doe dit maar.
Geen enkel probleem.
Nu ... Werkt dit script bij jou? Bij mij niet.
(Ik zie een aantal vreemde dingen, zoals de variabele event die undefined is)
Indien het je interesseert om het te regelen met jQuery en jQuery-UI, kan ik je gemakkelijk verder helpen.
Hier een voorbeeldje van iemand die ook een drag/drop-vraag had; het zou er vrij gelijkaardig uitzien.
http://www.phphulp.nl/php/forum/topic/drag-and-drop-in-table/82694/last/