Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Przesuwane elementy strony
Forum PHP.pl > Forum > Przedszkole
patryk20120
14.05.2009, 18:41:52
Witam, mam kod, który umożliwia mi przesuwanie dowolnych elementów na stronie smile.gif lecz czy ktoś może mi powiedzieć jak ustawić dany np. <div> w pozycji np. 400,500(chodzi o współrzędne) tongue.gif

Oto kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Przesuwane elementy strony :)</title>
  5.     <style type="text/css">
  6.     #cos {
  7.     width: 100px;
  8.     height: 100px;
  9.     }
  10.  
  11.     #cos1 {
  12.     width: 200px;
  13.     height: 140px;
  14.     }
  15.  
  16.     #cos2 {
  17.     width: 125px;
  18.     height: 189px;
  19.     }
  20.  
  21.  
  22. .drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
  23. th, td {text-align: left; padding-right: 1em;}
  24. table {margin: 0 0 0.4em 1.3em; border: 1px solid rgb(240, 240, 240);}
  25.     </style>
  26.  
  27. </head>
  28. <body>
  29.     <div id="pageContainer">
  30.         <h3>Przesuwane elementy strony:</h3><hr />
  31.  
  32.         <div class="drag" id="cos">coś</div>
  33.         <div class="drag"id="cos1">coś innego np.<br><textarea height=10 width=10></textarea></div>
  34.         <div class="drag"id="cos2">też coś innego np. <input type=radio><input type=radio><input type=radio></div>    
  35.  
  36.  
  37.     </div>
  38.  
  39.     <script language="JavaScript" type="text/javascript">
  40. <!--
  41.  
  42. // this is simply a shortcut for the eyes and fingers
  43. function $(id)
  44. {
  45.     return document.getElementById(id);
  46. }
  47.  
  48. var _startX = 0;            // mouse starting positions
  49. var _startY = 0;
  50. var _offsetX = 0;            // current element offset
  51. var _offsetY = 0;
  52. var _dragElement;            // needs to be passed from OnMouseDown to OnMouseMove
  53. var _oldZIndex = 0;            // we temporarily increase the z-index during drag
  54. var _debug = $('debug');    // makes life easier
  55.  
  56.  
  57. InitDragDrop();
  58.  
  59. function InitDragDrop()
  60. {
  61.     document.onmousedown = OnMouseDown;
  62.     document.onmouseup = OnMouseUp;
  63. }
  64.  
  65. function OnMouseDown(e)
  66. {
  67.     // IE is retarded and doesn't pass the event object
  68.     if (e == null) 
  69.         e = window.event; 
  70.  
  71.     // IE uses srcElement, others use target
  72.     var target = e.target != null ? e.target : e.srcElement;
  73.  
  74.  
  75.     // for IE, left click == 1
  76.     // for Firefox, left click == 0
  77.     if ((e.button == 1 && window.event != null || 
  78.         e.button == 0) && 
  79.         target.className == 'drag')
  80.     {
  81.         // grab the mouse position
  82.         _startX = e.clientX;
  83.         _startY = e.clientY;
  84.  
  85.         // grab the clicked element's position
  86.         _offsetX = ExtractNumber(target.style.left);
  87.         _offsetY = ExtractNumber(target.style.top);
  88.  
  89.         // bring the clicked element to the front while it is being dragged
  90.         _oldZIndex = target.style.zIndex;
  91.         target.style.zIndex = 10000;
  92.  
  93.         // we need to access the element in OnMouseMove
  94.         _dragElement = target;
  95.  
  96.         // tell our code to start moving the element with the mouse
  97.         document.onmousemove = OnMouseMove;
  98.  
  99.         // cancel out any text selections
  100.         document.body.focus();
  101.  
  102.         // prevent text selection in IE
  103.         document.onselectstart = function () { return false; };
  104.         // prevent IE from trying to drag an image
  105.         target.ondragstart = function() { return false; };
  106.  
  107.         // prevent text selection (except IE)
  108.         return false;
  109.     }
  110. }
  111.  
  112. function ExtractNumber(value)
  113. {
  114.     var n = parseInt(value);
  115.  
  116.     return n == null || isNaN(n) ? 0 : n;
  117. }
  118.  
  119. function OnMouseMove(e)
  120. {
  121.     if (e == null) 
  122.         var e = window.event; 
  123.  
  124.     // this is the actual "drag code"
  125.     _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
  126.     _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
  127.  
  128. }
  129.  
  130. function OnMouseUp(e)
  131. {
  132.     if (_dragElement != null)
  133.     {
  134.         _dragElement.style.zIndex = _oldZIndex;
  135.  
  136.         // we're done with these events until the next OnMouseDown
  137.         document.onmousemove = null;
  138.         document.onselectstart = null;
  139.         _dragElement.ondragstart = null;
  140.  
  141.         // this is how we know we're not dragging
  142.         _dragElement = null;
  143.  
  144.     }
  145. }
  146. //-->
  147.     </script>
  148.  
  149.     </body>
  150.  
  151. </html>
[HTML] pobierz, plaintext
r4xz
14.05.2009, 18:46:03
nie wiem czy dobrze cię zrozumiałem, ale chyba masz na myśli:
position: absolute; parametry

jako parametry podajesz odległość od krawędzi.
np.
left: 50px;
top: 300px;
patryk20120
14.05.2009, 20:09:39
Tak, dziękuję ;-)
A można to zrobić jeszcze inaczej, nie poprzez CSS, tylko JS questionmark.gif
ignas1987
15.05.2009, 13:36:10
Hmmm... fajnie by było gdyby można było dokować poszczególne elemety w danych komórkach np. tabeli... Oczywiście byłaby ukryta. Gdzieś takie coś widziałem, ale nie wiem gdzie... Może wiecie?
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.