Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Metoda obiektu do obsługi eventu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
DarK MaN
28.06.2007, 15:16:31
Mam prosty skrypt do obsługi drag & drop. Nie działa jeśli funkcja move odwołuje się do swojego obiektu poprzez "this". Jeśli robi to bezpośrednio za pomocą nazwy wszystko jest OK (wykomentowany kod). Co może być tego przyczyną?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. 	<STYLE type="text/css">
  5. 	.window_style
  6. 		{
  7. 		background-color: #66CCCC;
  8. 		border: 1px #000000 solid;
  9. 		position: absolute;
  10. 		width:100px;
  11. 		height:100px;
  12. 		}
  13. 	</STYLE>
  14.  
  15. 	<script LANGUAGE="JavaScript">
  16. 	<!--
  17.  
  18. 	function Draging()
  19. 		{
  20. 		//pozycja początkowa okna
  21. 		this.coordX = 0;
  22. 		this.coordY = 0;
  23.  
  24. 		//pozycja początkowa kursora
  25. 		this.offsetX = 0;
  26. 		this.offsetY = 0;
  27. 		//okno
  28. 		this.target = null;
  29.  
  30. 		//pobiera dane początkowe o oknie i kursorze
  31. 		this.drag = function drag(e, obj)
  32. 			{
  33. 			e = (e) ? e : window.event;
  34. 			this.target = obj;
  35. 			this.offsetX = e.clientX;
  36. 			this.offsetY = e.clientY;
  37. 			this.coordX = parseInt(this.target.style.left);
  38. 			this.coordY = parseInt(this.target.style.top);
  39. 			this.target.onmousemove = this.move;
  40. 			}
  41.  
  42. 		//przesuwa okno
  43. 		this.move = function move(e)
  44. 			{
  45.  
  46. 			e = (e) ? e : window.event;
  47.  
  48. 			this.target.style.left = this.coordX + e.clientX - this.offsetX + 'px';
  49. 			this.target.style.top = this.coordY + e.clientY - this.offsetY + 'px';
  50.  
  51. 			/*
  52. 			//odwołanie przez winDrag, this nie działa
  53. 			winDrag.target.style.left = winDrag.coordX + e.clientX - winDrag.offsetX + 'px';
  54. 			winDrag.target.style.top = winDrag.coordY + e.clientY - winDrag.offsetY + 'px';
  55. 			*/
  56.  
  57. 			return false;
  58. 			}
  59.  
  60. 		//zaprzestaje przesuwania okna, czyści dane o obiekcie
  61. 		this.drop = function drop(e)
  62. 			{
  63. 			e = (e) ? e : window.event;
  64. 			this.target.onmousemove = null;
  65. 			this.target = null;
  66. 			this.offsetX = 0;
  67. 			this.offsetY = 0;
  68. 			this.coordX = 0;
  69. 			this.coordY = 0;
  70.  
  71. 			}
  72. 		}
  73.  
  74.  
  75. 	var winDrag = new Draging;
  76. 	//-->
  77. 	</SCRIPT>
  78. </HEAD>
  79.  
  80. <BODY>
  81. 	<div id="win1" class="window_style" style="top:10px; left:50px" onMouseDown="winDrag.drag(event, this);" onMouseUp = "winDrag.drop()">Win1</div>
  82. </BODY>
  83.  
  84. </HTML>
[HTML] pobierz, plaintext
Wiktor.
5.07.2007, 09:25:47
Cześć,
przyjrzałem się temu co napisałeś i sądzę, że problem to przypisanie funkcji move - zauważ, że przypisujesz ją jako eventHandler dla obiektu this.TARGET a nie this.

pozdrawiam
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.