#edit
doszedłem już troszkę dalej, niestety nigdzie nie mogę znaleźć jak rozpoznać który element jest upuszczany, rozpoznaje na jaki mam upuszczany, ale niestety w droppem czyta tylko 1.
małymi kroczkami ku celu smile.gif

Pozdrawiam i proszę o pomoc, KrzysiekKCN
[HTML] pobierz, plaintext 
  1. 	<script>
  2. 	$(function() {
  3. 		function ShowElement(divname) {
  4. 		var selectedEffect;
  5. 			if (divname == "#blog") {
  6. 			//redirect
  7. 			window.location.href = "blog.subpage.com";
  8. 			}
  9. 			if (divname == "#portfolio") {
  10. 			selectedEffect = "explode";
  11. 			}
  12. 			if ((divname == "#onas") || (divname = "#kontakt")) {
  13. 			selectedEffect = "blind";
  14. 			}				
  15. 			var options = {};	
  16. 			$(divname).toggle( selectedEffect, options, 500 );
  17. 		};
  18.  
  19. 		//$( "#icon" ).draggable();	
  20. 		$( ".icon" ).draggable();				
  21. 		$( "#start" ).droppable({
  22. 		drop: function( event, ui ) {
  23. 				var okno = $(this).attr('id');
  24. 				var przycisk= $('.icon').attr('id');
  25. 				alert(okno);
  26. 				alert(przycisk);				
  27. 			}
  28. 		});
  29. 	});
  30. 	</script>
[HTML] pobierz, plaintext


Niżej kod całości do sprawdzenia:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>jQuery UI Droppable - Default functionality</title>
  6. 	<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
  7. 	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
  8. 	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
  9. 	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
  10. 	<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
  11. 	<script src="http://jqueryui.com/ui/jquery.ui.droppable.js"></script>
  12. 	<script src="http://jqueryui.com/ui/jquery.effects.core.js"></script>
  13. 	<script src="http://jqueryui.com/ui/jquery.effects.explode.js"></script>
  14. 	<script src="http://jqueryui.com/ui/jquery.effects.blind.js"></script>
  15. 	<style>
  16. 	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  17. 	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  18. 	</style>
  19. 	<script>
  20. 	$(function() {
  21. 		function ShowElement(divname) {
  22. 		var selectedEffect;
  23. 			if (divname == "#blog") {
  24. 			//redirect
  25. 			window.location.href = "blog.subpage.com";
  26. 			}
  27. 			if (divname == "#portfolio") {
  28. 			selectedEffect = "explode";
  29. 			}
  30. 			if ((divname == "#onas") || (divname = "#kontakt")) {
  31. 			selectedEffect = "blind";
  32. 			}				
  33. 			var options = {};	
  34. 			$(divname).toggle( selectedEffect, options, 500 );
  35. 		};
  36.  
  37. 		//$( "#icon" ).draggable();	
  38. 		$( ".icon" ).draggable();				
  39. 		$( "#start" ).droppable({
  40. 		drop: function( event, ui ) {
  41. 				var okno = $(this).attr('id');
  42. 				var przycisk= $('.icon').attr('id');
  43. 				alert(okno);
  44. 				alert(przycisk);				
  45. 			}
  46. 		});
  47. 	});
  48. 	</script>
  49. 	<link rel="stylesheet" href="../demos.css">
  50. </head>
  51. <body>
  52. <!-- links -->
  53.  
  54.  
  55.  
  56. 				<div id="#onas" rel="#onas" class="icon" style="width: 150px; height: 50px; background: purple; text-align: center; font-weight: bold; color: white; z-index: 4;">
  57. 					<p>O NAS</p>
  58. 				</div>
  59.  
  60. 				<div id="#kontakt" rel="#kontakt" class="icon" style="width: 150px; height: 50px; background: purple; text-align: center; font-weight: bold; color: white; z-index: 4;">
  61. 					<p>KONTAKT</p>
  62. 				</div>
  63.  
  64. 				<div id="icon" rel="#portfolio" class="icon" style="width: 150px; height: 50px; background: purple; text-align: center; font-weight: bold; color: white; z-index: 4;">
  65. 					<p>PORTFOLIO</p>
  66. 				</div>
  67.  
  68. 				<div id="icon" rel="#blog" class="icon" style="width: 150px; height: 50px; background: purple; text-align: center; font-weight: bold; color: white; z-index: 4;">
  69. 					<p>BLOG</p>
  70. 				</div>
  71.  
  72.  
  73. <hr>
  74. <div id="screen" style="background: black; margin: 20px; padding: 20px; width: 200px; height: 200px;">
  75.  
  76. 				<div id="start" style="background: magenta; height: 150px; width: 150px;  position: absolute; top: 340px; left: 50px;">
  77. 					<p>START  <- to tu upusc ikony</p>
  78. 				</div>
  79.  
  80. 				<div id="onas" style="background: red; height: 150px; width: 150px;  position: absolute; top: 340px; left: 50px; display: none;">
  81. 					<p>O Nas  </p>
  82. 				</div>
  83.  
  84. 				<div id="portfolio" style="background: green; height: 150px; width: 150px;  position: absolute; top: 340px; left: 50px; display: none;">
  85. 					<p>portfolio</p>
  86. 				</div>
  87.  
  88. 				<div id="kontakt" style="background: yellow; height: 150px; width: 150px;  position: absolute; top: 340px; left: 50px; display: none;">
  89. 					<p>kontakt</p>
  90. 				</div>
  91. </div>
  92.  
  93. </body>
  94. </html>
[HTML] pobierz, plaintext