Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [js][css] Drag & Drop - okienka ala windows'owe, czyli jak zrobić przeciąganie divów przy pomocy innych divów
Sky_walker
post
Post #1





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
-----


Witam,
chciałbym stworzyć okienka, zrobione jak te z windowsa, to jest - z paskiem na górze za który się przeciąga całego div'a.
Niestety nie znam JavaScript'a na tyle, żeby poradzić sobie samemu (IMG:http://forum.php.pl/style_emoticons/default/wstydnis.gif)
próbowałem coś zrobić samemu, lecz w najlepszym wypadku okienko wogóle nie chciało się przeciągać (IMG:http://forum.php.pl/style_emoticons/default/sleep.gif)

Oto kod JavaScript który działa, znaleziony w sieci, załączam go do dokumentu jako oddzielny plik .js:
Kod
function $(v) { return(document.getElementById(v)); }

function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function dragOBJ(d,e) {     
    function drag(e) { if(!stop) { d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }
    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
    document.onmousemove=drag;
    document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}


A to kod HTML:
  1. <div style=\"position: relative; top: 0; left: 0; background-color: gray; width: 300px;\">
  2. <div onmousedown=\"dragOBJ(this,event); return false;\" style=\"position: relative; top: 0; left: 0\">
  3. Tytul okna
  4. </div>
  5. <div>
  6. Tutaj jest tresc. Przeciagac mozna tylko za tytul, a przeciagany powinien byc div nadrzędny (ten z szarym tlem).
  7. </div>
  8. </div>
  9.  
  10. <div style=\"position: relative; top: 0; left: 0\" onmousedown=\"dragOBJ(this,event); return false;\">test zalaczony do kodu - to musi dzialac</div>


Bardzo proszę o pomoc
Go to the top of the page
+Quote Post
grzesiek_g
post
Post #2





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

Ostrzeżenie: (0%)
-----


Spróbuj użyć którejś z bibliotek js, np. JQuery, Mootools, Prototype (strasznie duże ale można znaleźć spakowane na grupach dyskusyjnych).
Go to the top of the page
+Quote Post
Sky_walker
post
Post #3





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
-----


Tak, słyszałem o bibliotekach, ale zależy mi na minimalnaj obiętości tego co robie, dlatego chciałem to zrobić możliwie klasyczną metodą.
Ktoś zna JS na tyle, żeby poradzic sobie bez 'gotowca' ? (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
vokiel
post
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Co do lekkości kodu to tutaj (Extjs) jest biblioteka, która umożliwia wybranie sobie tych części, których będziesz używał, nie musisz ładować całego framework, wystarczy wybrać sobie część dotyczącą wybranych przez Ciebie opcji.
Go to the top of the page
+Quote Post
Cysiaczek
post
Post #5





Grupa: Moderatorzy
Postów: 4 465
Pomógł: 137
Dołączył: 26.03.2004
Skąd: Gorzów Wlkp.




Cytat
Niestety nie znam JavaScript'a na tyle, żeby poradzić sobie samemu wstydnis.gif

Cytat
Tak, słyszałem o bibliotekach, ale zależy mi na minimalnaj obiętości tego co robie, dlatego chciałem to zrobić możliwie klasyczną metodą.

Skoro nie umiesz, to się naucz - dostałeś nazwy bibliotek, które umożliwiają takie coś - przejrzyj ich kod i zobacz jak to jest tam zrobione.

Cytat
Ktoś zna JS na tyle, żeby poradzic sobie bez 'gotowca' ?

Tak. Ja znam - jaka forma rozliczenia?

Pozdrawiam.
Go to the top of the page
+Quote Post
grzesiek_g
post
Post #6





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

Ostrzeżenie: (0%)
-----


Mootools też oferuje złożenie sobie biblioteki z poszczególnych funkcji, wejdź na: http://mootools.net/download, zaznacz obie opcje przy Drag, pobierz i używaj. Sprawdziłem, 19,4 kB - czy to dużo? Dostajesz sprawdzone rozwiązanie i za darmo:)
Go to the top of the page
+Quote Post
slammer
post
Post #7





Grupa: Zarejestrowani
Postów: 187
Pomógł: 6
Dołączył: 31.08.2005
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----


ftp://ftp.helion.pl/przyklady/jszapr.zip pobierz sobie ftpy heliona rozdział 13 jest kilka skryptów D&D możesz przeanalizować, są prościutkie.
Go to the top of the page
+Quote Post
Sky_walker
post
Post #8





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
-----


THX slammer, niezly przykład, w miare prosty, więc biore się za modyfikacje (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Cysiaczek - wyluzuj, ja zastanawiałem się tylko czy ktoś nie potrafiłby zmodyfikować tego kodu który wkleiłem, jak nie to nie, poszukam innego sposobu, tymbardziej, że teraz mam jakiś prostrzy przykład :] A nie 19KB biblioteke która jest setki mil od tego co jest dla mnie "proste".
grzesiek_g - 19 KB w porównaniu z 1KB kodu który wrzuciłem to jest bardzo dużo... no, tylko ten 'mój' kod nie robi tego co mi trzeba (IMG:http://forum.php.pl/style_emoticons/default/sleep.gif) ale zgaduje, że jakby go podrasować to byłoby max 2KB i spełniałoby swoje zadanie w 100% (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.12.2025 - 00:19