Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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
 
Start new topic
Odpowiedzi
grzesiek_g
post
Post #2





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

Posty w temacie


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: 20.12.2025 - 18:47