 [JavaScript]OnMouseOver + OnClick, Po złapaniu... |
  |
| [JavaScript]OnMouseOver + OnClick, Po złapaniu... |
 30.11.2010, 15:09:02
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%) 
 |
Witam moje pytanie może być trochę dziwne ale jak połączyć OnMouseOver i OnClick?
Tak aby uzyskać efekt po złapaniu elementu wykonaj... i wykonuj do momentu jego upuszczenia. |
 |
 
|
|
30.11.2010, 15:28:27
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
W zdarzeniu onmousedown dopisujesz nowe zdarzenie onmosuemove, które kasujesz przy zdarzeniu onmouseup: np.
Kod <div id="test" style="border: 1px solid black;">1234567890</div> <script> document.getElementById('test').onmousedown = function(){ var that = this; window.onmousemove = function(){ that.innerHTML = Math.random(); }; window.onmouseup = function(){ this.onmousemove=null; }; } </script> Bo rozumiem, że chodzi coś na kształt skryptu drag&drop, jak nie to robisz to samo tylko bez window 
Ten post edytował kamil4u 30.11.2010, 15:29:20 -------------------- |
|
|
|
|
30.11.2010, 15:39:02
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 143 Pomógł: 19 Dołączył: 7.09.2009 Skąd: Rzeszów Ostrzeżenie: (0%)
|
onDrag()
http://www.java2s.com/Code/JavaScript/Even...DragExample.htm Ten post edytował pablo89pl 30.11.2010, 15:43:36 |
|
|
|
|
30.11.2010, 15:43:04
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
onDrag nie jest przypadkiem czymś co np. IE i inne starsze(ale bez przesady) przeglądarki nie obsługuje?
-------------------- |
|
|
|
|
30.11.2010, 15:47:24
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 143 Pomógł: 19 Dołączył: 7.09.2009 Skąd: Rzeszów Ostrzeżenie: (0%)
|
być-może...
w każdym bądź razie można to zrealizaować nastepująco: onMouseDown: ustawiamy flage np. clicked na true onMouseUp: ustawiamy flate clicked na false i jak np chcesz cos przeciagac lub cos podobnego w trakcie poruszania myszką podczas gdy wcisniety jest klawisz mmyszki to: onMouseMove: if(clicked) rob_cos() |
|
|
|
|
1.12.2010, 10:34:10
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%)
|
Dzięki wielkie za pomoc
tego potrzebowałem A jeszcze takie pytanko... Na chrome czy FF działa super ale na IE8 nie chce załapać jakieś sugestie? |
|
|
|
|
1.12.2010, 13:43:27
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Pokaż kod HTML + JS.
-------------------- |
|
|
|
|
1.12.2010, 15:17:53
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%)
|
A więc mam taki kodzik który ma służyć do przesuwania tych 3 div-ów klikamy na dowolny div przytrzymujemy i przeciągamy... Wszystko pięknie działa tylko nie w IE8...
Kod <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>cos</title> <script language="JavaScript1.2"> var IE = document.all?true:false if (!IE) document.captureEvents(Event.MOUSEMOVE) document.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 function getMouseXY(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop } else { // grab the x-y pos.s if browser is NS tempX = e.pageX tempY = e.pageY } if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} document.Show.MouseX.value = tempX document.Show.MouseY.value = tempY return true } var tempDivX = 0 var tempDivY = 0 function przesun(id) { window.onmousemove = function(){ tempDivY = document.getElementById(id).offsetTop tempDivX = document.getElementById(id).offsetLeft document.Show.DivY.value = tempDivY document.Show.DivX.value = tempDivX document.Show.DivId.value = id document.getElementById(id).style.top=tempY; document.getElementById(id).style.left=tempX; }; window.onmouseup = function(){ this.onmousemove=null; }; } </script> </head> <body> <form name="Show"> <input type="text" name="MouseX" value="0" size="4"> X<br /> <input type="text" name="MouseY" value="0" size="4"> Y<br /> <br /> <input type="text" name="DivX" value="0" size="4"> X Div<br /> <input type="text" name="DivY" value="0" size="4"> Y Div<br /> <input type="text" name="DivId" value="0" size="4"> Id Div<br /> </form> <div id=1 style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: pointer; background-color: silver;' onmousedown=przesun('1');></div> <div id=2 style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: pointer; background-color: purple;' onmousedown=przesun('2');></div> <div id=3 style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: pointer; background-color: black;' onmousedown=przesun('3');></div> </body> </html> |
|
|
|
|
2.12.2010, 10:28:06
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 143 Pomógł: 19 Dołączył: 7.09.2009 Skąd: Rzeszów Ostrzeżenie: (0%)
|
jak nie działa w IE to prowizorycznym sposobem jest dodanie metatagu w sekcji HEAD wymuszającej tryb zgodności z 7
http://weblogs.asp.net/fredriknormen/archi...-meta-tags.aspx |
|
|
|
|
2.12.2010, 14:31:51
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%)
|
Mała poprawka do konstytucji w ogóle nie działa na IE...
|
|
|
|
|
2.12.2010, 23:19:19
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%)
|
Cytat(cerberpat @ 2.12.2010, 14:31:51 )  Mała poprawka do konstytucji w ogóle nie działa na IE... na szybko wkleiłem na laptopie u dziewczyny i napisze jedno - pod IE widocznie nie ma czegoś takiego jak window.onmousemove ;p - na dokumencie już alert działa - podepnij to pod body czy pokombinuj - a kod testuje się małymi kroczkami... jak mniej więcej rozwiązanie znasz to nie będę za Ciebie rozwiązywał tylko napisałem gdzie to nie ma prawa działać...a i jeszcze Ci podpowiem, że jak raz zrobisz document.cos=funkcja i potem drugi raz to samo to skasujesz to pierwsze - funkcje musisz albo inaczej pod zdarzenia podpinać albo zrobić sobie stos funkcji w np. tablicy i to wywoływać w jednej funkcji pod zdarzeniem... -------------------- Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
|
|
|
|
|
3.12.2010, 11:38:20
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%)
|
Po małych bólach ale kodzik co do przesuwania diva (onDrag) wygląda tak
działa już również na IE Dziękuje wszystkim za pomoc Kod <html>
<head> <meta http-equiv="X-UA-Compatible" content="IE=8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>cos</title> <script type="text/javascript"> var IE = document.all?true:false if (!IE) document.captureEvents(Event.MOUSEMOVE) document.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 var tempDivX = 0 var tempDivY = 0 var sprawdz = false var name = null function getMouseXY(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop } else { tempX = e.pageX tempY = e.pageY } if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} document.Show.MouseX.value = tempX document.Show.MouseY.value = tempY if (sprawdz == true) { tempDivY = document.getElementById(name).offsetTop tempDivX = document.getElementById(name).offsetLeft document.Show.DivY.value = tempDivY document.Show.DivX.value = tempDivX document.Show.DivId.value = name document.getElementById(name).style.top=tempY+'px'; document.getElementById(name).style.left=tempX+'px'; } return true } function mousedown(id) { sprawdz = true name = id } function mouseup() { sprawdz = false } </script> </head> <body> <form name="Show" action='#' method='post'> <p> <input type=text name=MouseX value=0 size=4> X </p> <p> <input type=text name=MouseY value=0 size=4> Y </p> <p> <input type=text name=DivX value=0 size=4> X Div </p> <p> <input type=text name=DivY value=0 size=4> Y Div </p> <p> <input type=text name=DivId value=0 size=4> Id Div </p> </form> <div id='id1' style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: move; background-color: silver;' onmousedown=mousedown("id1"); onmouseup=mouseup();></div> <div id='id2' style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: move; background-color: purple;' onmousedown=mousedown("id2"); onmouseup=mouseup();></div> <div id='id3' style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: move; background-color: black;' onmousedown=mousedown("id3"); onmouseup=mouseup();></div> </body> </html> |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 18.07.2025 - 00:47 |
