MyCity » Web dizajn / HTML -> JavaScript » javascript drag and drop

javascript drag and drop

Napisano na dan: 8.10.2014

javascript drag and drop
Sledeća strana Pagination

Idi na vrh

Poslao: 08 Okt 2014 22:58
Idi na vrh
offline
  • Niko E
  • Software & Information Engineering
  • Pridružio: 05 Maj 2009
  • Poruke: 135
  • Gde živiš: Wien

Ovako našao sam neku skriptu:

  1. <html>
  2. <head>
  3. <title>Drag-and-Drop</title>
  4. <script type="text/javascript">
  5.  
  6. var dragobjekt = null;
  7.  
  8. var dragx = 0;
  9. var dragy = 0;
  10.  
  11. // Pozicija misa
  12. var posx = 0;
  13. var posy = 0;
  14.  
  15.  
  16. function draginit() {
  17.  
  18.   document.onmousemove = drag;
  19.   document.onmouseup = dragstop;
  20. }
  21.  
  22.  
  23. function dragstart(element) {
  24.  
  25.   dragobjekt = element;
  26.   dragx = posx - dragobjekt.offsetLeft;
  27.   dragy = posy - dragobjekt.offsetTop;
  28. }
  29.  
  30.  
  31. function dragstop() {
  32.   dragobjekt=null;
  33. }
  34.  
  35.  
  36. function drag(event) {
  37.  
  38.   posx = document.all ? window.event.clientX : event.pageX;
  39.   posy = document.all ? window.event.clientY : event.pageY;
  40.   if(dragobjekt != null) {
  41.     dragobjekt.style.left = (posx - dragx) + "px";
  42.     dragobjekt.style.top = (posy - dragy) + "px";
  43.   }
  44. }
  45. //-->
  46. </script>
  47. </head>
  48. <body onload="draginit()">
  49. <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
  50. <div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
  51. </body>
  52. </html>


Radi dobro, ali kako da je ograničim? Ne želim da se objekat pomera van granice preglednika.
Npr. da se ne dešava ovo:


Inače ne mora baš ova skripta, može i neka druga (npr. [Link mogu videti samo ulogovani korisnici]) samo je bitno da mogu da pomeram objekat i da ima ograničen prostor po kojem može da se kreće.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 09 Okt 2014 15:21
Idi na vrh
offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4576

Napisano: 09 Okt 2014 15:20

Koristi opciju containment.

[Link mogu videti samo ulogovani korisnici]

Dopuna: 09 Okt 2014 15:21

Što ne radiš u jQuery, mnogo je brže i jednostavnije?



MyCity » Web dizajn / HTML -> JavaScript » javascript drag and drop

Ko je trenutno na forumu
 

Ukupno su 993 korisnika na forumu :: 75 registrovanih, 7 sakrivenih i 911 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Alexa77, antonije64, Arsenije, Bo96, bobomicek, Bobrock1, Bojan198527, bojanstros9, Boris90, boromir, chichabg, colji, crnirocko, d.arsenal321, Dambi, DeerHunter, dj.ape, EXIT78, FOX, Georgius, havoc995, HPkopun, jarovitt, Kajzer Soze, Kajzer_Soze, kdor ma cajta, kuntalo, kybonacci, Lošmi, Lucije Kvint, Marko00, mercedesamg, Miki281, milanmi87, milenko crazy north, MiloradKomadic, milos97, MR Z, mux, naki011, nelezele, Nobunaga, OREMUS, Paklenica, Panter, Parker, pisac12, Plavi Jadran, Polemarchoi, prasinar, precan, PrincipL, Raso75, RD84, S94, Sićko, smokovo1990, ss10, starlights, strn, synergia, Tila Painen, Titan, varda, Vaske8990, vathra, Veless, W123, zafon031, Zoran Rapajić, zziko, šakalakazu, šumar bk2, Đole64, Đurđevdan