Ad stopt er mee
Coördinaten ophalen
ik zit met een klein vraagje. Ik wil zouiets maken dat mensen op het scherm zelf hun notitieblaadjes kunnen verschuiven. Nu lukt dit me aardig (http://www.fressh.nl/bord.php) maar nu haal ik de X en Y coördinaten op zodra ze hem hebben geplaatst. Nu zoek ik eigenlijk een manier om zodra je klaar bent met al je notitieblaadjes te verplaatsen, je op de save knop moet drukken en de positie als het ware wordt bepaald van je notities en vervolgens in de database zet. Heeft iemand enig idee hoe dit te doen?
Maar wat je kunt doen is een knopje save hebben, als er dan d'r op gedrukt wordt, alle notes bij langs gaan in javascript en dan de x en de y opvragen.
Eventueel (ik zou het wel doen) met een javascript library, zoals jquery.
EDIT:
Werkt die nu wel in Opera?
Gewijzigd op 01/01/1970 01:00:00 door Thomas van Broekhoven
Thomas schreef op 19.06.2008 19:46:
Ja maar hoe kan je dat opvragen.
EDIT:
Werkt die nu wel in Opera?
EDIT:
Werkt die nu wel in Opera?
Jah, het werkt nu wel in Opera :-D. Over de positie van je hier lezen (goede site!!)
Obj == object == div / span / p / whatever...
Parse error: syntax error, unexpected ')', expecting '&' or T_VARIABLE in /storage/mijndomein/users/080888/public/sites/www.fressh.nl/bord.php on line 132
Regel 132:
function findPos(obj) {
Gewijzigd op 01/01/1970 01:00:00 door Thomas van Broekhoven
?
Thomas schreef op 19.06.2008 20:32:
function findPos($obj) {
?
?
function lostFingers($bool) {
if($bool) {
echo 'Yes'; }
else {
echo 'Yes';
}
Ik begrijp je niet, als je een php error krijgt, geef dan je code. Maar ik denk netzoals Douwe M dat je javascript als php probeert uit te voeren.
Verder kun je best wel wat tekst schrijven, dat is ook zo netjes. PHP is server-side, javascript is client-side. Dat wat je wilt is client-side. Als je dat niet begrijpt dan misschien een basiscursusje javascript doen?
function findPos(obj) {
Dat is javascript, simpel te zien aan het feit dat er geen dollar-teken voor 'obj' staat. En het komt van http://www.quirksmode.org/js/findpos.html, waar in de titel van de pagina 'JavaScript - Find position' staat. Je hebt dus een stukje JS in je PHP gezet ;)
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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
<html>
<head>
<style type="text/css">
<!--
.dragme{
position: relative;
height: 200px;
width: 200px;
background-color: #FFFF99;
}
.inhoud{
height: 180px;
width: 180px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
-->
</style>
<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="dragme">
<div class="inhoud">
Test
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
<!--
.dragme{
position: relative;
height: 200px;
width: 200px;
background-color: #FFFF99;
}
.inhoud{
height: 180px;
width: 180px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
-->
</style>
<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="dragme">
<div class="inhoud">
Test
</div>
</div>
</body>
</html>
Jullie hebben hier denk ik meer verstand van als ik.
Prototype JS ism Script.aculo.us: http://github.com/madrobby/scriptaculous/wikis/draggable
Mootools: http://docs.mootools.net/Plugins/Drag
Douwe M schreef op 19.06.2008 20:48:
JavaScript leren is inderdaad handig, maar aangezien je hier op PHPHulp bent kan ik me goed voorstellen dat je geen zin hebt JS helemaal te gaan leren, en je je liever concentreert op PHP, en je voor de JavaScript een framework zoals Prototype JS (ism Script.aculo.us) of Mootools gebruikt. Beide frameworks hebben een simpel Drag-systeem.
Prototype JS ism Script.aculo.us: http://github.com/madrobby/scriptaculous/wikis/draggable
Mootools: http://docs.mootools.net/Plugins/Drag
Prototype JS ism Script.aculo.us: http://github.com/madrobby/scriptaculous/wikis/draggable
Mootools: http://docs.mootools.net/Plugins/Drag
Dan moet je nogsteeds wel wat van javascript snappen, want hij wilt die coördenaten in een db krijgen....
Ik ben ook ooit met AJAX en de rest van JavaScript begonnen simpelweg door het doorlezen van de Prototype JS Documentatie ;)
Nogmaals bedankt voor jullie hulp. Maar heeft iemand nog een enig idee hoe dit aan te pakken?
Ik heb net even een paar keer je siteje gerefreshd, en zag dus de code van http://github.com/madrobby/scriptaculous/wikis/draggable.
Maar deze code werkt natuurlijk pas als je het framework Prototype JS en zijn onderdeel Script.aculo.us hebt gedownload vanaf http://script.aculo.us/downloads.
Als je het gedownload hebt hoef je alleen maar twee regels code in je site te zetten, en daarna kun je de code van http://github.com/madrobby/scriptaculous/wikis/draggable gebruiken. :)