Drag & drop - Forum PHP.pl

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Drag & drop

Max Damage Zobacz profil	25.09.2008, 18:17:43 Post #1
Grupa: Zarejestrowani Postów: 246 Pomógł: 19 Dołączył: 14.06.2007 Ostrzeżenie: (0%)	Wiem, że było to już setki razy, przeglądałem forum, wiem też że można to zrobić prościej przy użyciu jakiegoś frameworka. Chciałbym jednak to zrozumieć i przy okazji poćwiczyć trochę javascript ponieważ jeszcze się go uczę. Właściwie to skrypt działa, tyle tylko że nie widzi mi obiektu w funkcji mouseMove przez co muszę ustawiać go ręcznie. Jak zrobić, aby był on widoczny po wywołaniu pierwszej funkcji we wszystkich następnych? [HTML] pobierz, plaintext function mouseDown(event,objekt) { //czyta odległość od krawędzi startX = objekt.offsetLeft; startY = objekt.offsetTop; document.form.X.value=startX; document.form.Y.value=startY; //gdzie kliknąłem ? initialMouseX = event.clientX; initialMouseY = event.clientY; document.form.q.value=initialMouseX; document.form.w.value=initialMouseY; document.addEventListener("mousemove", mouseMove, true); } function mouseMove(event) { //oblicza przesunięcie od kliknięcia dX = event.clientX - initialMouseX; dY = event.clientY - initialMouseY; document.form.r.value=dX; document.form.t.value=dY; //ustawia obrazek document.obrazek.style.position="fixed"; document.obrazek.style.left = startX + dX + 'px'; document.obrazek.style.top =startY + dY + 'px'; document.addEventListener("mouseup", mouseUp, true); } function mouseUp() { removeEvent("mousemove", mouseMove, true); removeEvent("mouseup", mouseUp, true); } </script> </head> <body> <form name="form"><br /> Odległości od brzegów :<br /> <input type="text" name="X" /> <input type="text" name="Y" /><br /> Gdzie kliknałem:<br /> <input type="text" name="q" /> <input type="text" name="w" /><br /> Przesunięcie:<br /> <input type="text" name="r" /> <input type="text" name="t" /> </form> <img src="obrazek.jpg" name="obrazek" id="ob" onmousedown="mouseDown(event,this);" /> [HTML] pobierz, plaintext