Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js][css] Drag & Drop - okienka ala windows'owe
Forum PHP.pl > Forum > Po stronie przeglądarki
Sky_walker
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 wstydnis.gif
próbowałem coś zrobić samemu, lecz w najlepszym wypadku okienko wogóle nie chciało się przeciągać 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
grzesiek_g
Spróbuj użyć którejś z bibliotek js, np. JQuery, Mootools, Prototype (strasznie duże ale można znaleźć spakowane na grupach dyskusyjnych).
Sky_walker
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' ? winksmiley.jpg
vokiel
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.
Cysiaczek
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.
grzesiek_g
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:)
slammer
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.
Sky_walker
THX slammer, niezly przykład, w miare prosty, więc biore się za modyfikacje 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 sleep.gif ale zgaduje, że jakby go podrasować to byłoby max 2KB i spełniałoby swoje zadanie w 100% winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.