login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Overige > Versleep Venster

Versleep Venster

Auteur: Musestorm.com - 04 juli 2006 - 16:01 - Gekeurd door: Gerard - Hits: 2970 - Aantal punten: (0 stemmen)





Geen uitleg nodig lijkt mij.

ps. Houdt er rekening mee dat het niet mogelijk is (met de huidige staat van het script) om meerdere widgets op 1 pagina te plaatsen.

Code:
HTML code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id='widget1' class='widget' style='position: absolute; left: 150;top: 150; width: 250;'>
  2. 	<div style='cursor: move; width: 100%; height: 16; background-color: #CCCCFF; border-bottom: 1px solid #CACACA; '>
  3. 		<table  style='font-family: arial; font-size: 8pt;' width=100% cellpadding=0 cellspacing=0 border=0>
  4. 		<tr>
  5. 			<td ALIGN=left id='titlebar' style='padding-left: 5px;'>Widget Title Bar</td>
  6. 			<td align=right style='padding-right: 5px;'> <a href='#' style='text-decoration:none;'><b>X</b></a></td>
  7. 		</tr>
  8. 		</table>
  9. 	</div>
  10. 	<div id='' style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>
  11. 	Widget Body (this is where the widget content is going to be placed)</div>
  12. </div>


Javascript:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var x,y;
  2. var tx, ty;
  3. var isDrag=false;
  4.  
  5. var firefox=document.getElementById&&!document.all;
  6.  
  7. document.onmousemove=mouseMove;
  8. document.onmousedown=selectMouse;
  9. document.onmouseup=function(){
  10. 	isDrag=false;
  11. }
  12.  
  13. function selectMouse(e) 
  14. {	
  15. 	if (firefox){
  16. 		//verify that user clicked the 'titlebar' element 
  17. 		var p=e.target;	
  18. 		if (p.attributes['id'] && p.attributes['id'].value=="titlebar"){
  19. 			isDrag=true;
  20. 			x=e.clientX;
  21. 			y=e.clientY;
  22. 			//get the widget coordinates from the root, 'widget1' element
  23. 			tx=parseInt(document.getElementById('widget1').style.left);
  24. 			ty=parseInt(document.getElementById('widget1').style.top);
  25. 		}
  26. 	}
  27. 	else{		//IE
  28. 		//verify that user clicked the 'titlebar' element
  29. 		var p=event.srcElement;		
  30. 		if (p.attributes['id'] && p.attributes['id'].value=="titlebar"){
  31. 			isDrag=true;
  32. 			x=event.clientX;
  33. 			y=event.clientY;
  34. 			//get the widget coordinates from the root, 'widget1' element
  35. 			tx=parseInt(document.getElementById('widget1').style.left);
  36. 			ty=parseInt(document.getElementById('widget1').style.top);
  37. 		}
  38. 	}
  39. }
  40.  
  41.  
  42. function mouseMove(e)
  43. {
  44.   if (isDrag)	//only move the box if the user is dragging it
  45.   {
  46. 	var box=document.getElementById("widget1");
  47. 	if (firefox){
  48. 		box.style.left = e.clientX + (tx - x);
  49. 		box.style.top  = e.clientY + (ty - y);
  50. 	}
  51. 	else{		//IE
  52. 		box.style.left = event.clientX + (tx - x);
  53. 		box.style.top  = event.clientY + (ty - y);
  54. 	}    
  55.   }
  56. }
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (5)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.034s