![]() |
![]() ![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 20.05.2009 Ostrzeżenie: (0%) ![]() ![]() |
Prosiłbym o opinie na temat tego kodu sortującego DIV-y onDrag...
- czytelność - czy to co napisałem ma sens itd. - co mógłbym zrobić lepiej? Kod <html>
<head> <meta http-equiv="X-UA-Compatible" content="IE=8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Boxy</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 Tablica = new Array() var idKlik = 0 var roznica = 0 var ruch = false var nrKlik = 0 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} if(ruch == true) { var top = tempY + roznica document.getElementById(idKlik).style.top=top+'px'; sprawdz(); } return true } function mousedown(id) { idKlik = id ruch = true roznica = document.getElementById(id).offsetTop - tempY for(x = 0; x <= Tablica.length-1; x++) { if(Tablica[x][0]==idKlik) { nrKlik = x } } } function mouseup() { ruch = false ustawDivy() } function TworzenieTablicy() { var wysokosc = 0 var top = 0 for(nr=0;nr<1000;nr++) { if(document.getElementById('id'+nr)) { top = document.getElementById('id'+nr).offsetTop wysokosc = document.getElementById('id'+nr).offsetHeight Tablica[nr] = Array('id'+nr,top,wysokosc) } else { break; } } wypelnijDivy(); } function wypelnijDivy() { for(x=0;x<=Tablica.length-1;x++) { document.getElementById(Tablica[x][0]).innerHTML = x+' | '+Tablica[x][0]+' - '+Tablica[x][1]+' : '+Tablica[x][2]; } } function ustawDivy() { for(x=0;x<=Tablica.length-1;x++) { document.getElementById(Tablica[x][0]).style.top=Tablica[x][1]+'px'; } } function sprawdz() { var tempId = 0 var tempWys = 0 if(Tablica[nrKlik][0]!=Tablica[Tablica.length-1][0]){ if(tempY > Tablica[nrKlik+1][1]+10 && Tablica[nrKlik][1] < Tablica[nrKlik+1][1]) { tempTabId = Tablica[nrKlik][0] tempTabTop = Tablica[nrKlik][1] tempTabWys = Tablica[nrKlik][2] Tablica[nrKlik][0] = Tablica[nrKlik+1][0] Tablica[nrKlik][2] = Tablica[nrKlik+1][2] Tablica[nrKlik+1][0] = tempTabId Tablica[nrKlik+1][1] = tempTabTop + Tablica[nrKlik+1][2] Tablica[nrKlik+1][2] = tempTabWys document.getElementById(Tablica[nrKlik][0]).style.top=Tablica[nrKlik][1]+'px'; wypelnijDivy() nrKlik++ } } if(Tablica[nrKlik][0]!=Tablica[0][0]){ if(tempY < Tablica[nrKlik-1][1]+Tablica[nrKlik-1][2]-10 && Tablica[nrKlik][1] > Tablica[nrKlik-1][1]) { tempTabId = Tablica[nrKlik-1][0] tempTabTop = Tablica[nrKlik-1][1] tempTabWys = Tablica[nrKlik-1][2] Tablica[nrKlik-1][0] = Tablica[nrKlik][0] Tablica[nrKlik-1][2] = Tablica[nrKlik][2] Tablica[nrKlik][0] = tempTabId Tablica[nrKlik][1] = tempTabTop + Tablica[nrKlik][2] Tablica[nrKlik][2] = tempTabWys document.getElementById(Tablica[nrKlik][0]).style.top=Tablica[nrKlik][1]+'px'; wypelnijDivy() nrKlik-- } } } </script> <script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script> </head> <body onmouseup=mouseup(); onload=TworzenieTablicy(); style="-moz-user-select: none;"> <div id='id0' style='position: absolute; left: 200px; top:50px; width: 150px; height: 25px; cursor: move; background-color: silver;' onmousedown=mousedown("id0"); onmouseup=mouseup();></div> <div id='id1' style='position: absolute; left: 200px; top:75px; width: 150px; height: 30px; cursor: move; background-color: purple;' onmousedown=mousedown("id1"); onmouseup=mouseup();></div> <div id='id2' style='position: absolute; left: 200px; top:105px; width: 150px; height: 25px; cursor: move; background-color: pink;' onmousedown=mousedown("id2"); onmouseup=mouseup();></div> <div id='id3' style='position: absolute; left: 200px; top:130px; width: 150px; height: 40px; cursor: move; background-color: green;' onmousedown=mousedown("id3"); onmouseup=mouseup();></div> <div id='id4' style='position: absolute; left: 200px; top:170px; width: 150px; height: 25px; cursor: move; background-color: yellow;' onmousedown=mousedown("id4"); onmouseup=mouseup();></div> <div id='id5' style='position: absolute; left: 200px; top:195px; width: 150px; height: 50px; cursor: move; background-color: blue;' onmousedown=mousedown("id5"); onmouseup=mouseup();></div> </body> </html> |
|
|
![]() ![]() |
![]() |
Aktualny czas: 20.08.2025 - 06:17 |