login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div beweegbaar, maar enkel in andere div

Offline Raze - 04/07/2010 16:23 (laatste wijziging 04/07/2010 16:23)
Avatar van RazePHP beginner Hallo,

ik heb een beweegbare div, dit werkt, maar hij kan over de hele pagina bewogen worden.
Hoe kan ik ervoor zorgen dat die enkel in één bepaalde div (de div 'content') kan bewegen?

de code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Coded by Waseem Khan
  2. // Developer at PakCoders
  3. // Downloaded from http://www.Web-Tricks.info
  4.  
  5. function getID(id)
  6. {
  7. 	return document.getElementById(id);
  8. }
  9.  
  10. // Determine browser and version.
  11.  
  12. function Browser() {
  13.  
  14.   var ua, s, i;
  15.  
  16.   this.isIE    = false;
  17.   this.isNS    = false;
  18.   this.version = null;
  19.  
  20.   ua = navigator.userAgent;
  21.  
  22.   s = "MSIE";
  23.   if ((i = ua.indexOf(s)) >= 0) {
  24.     this.isIE = true;
  25.     return;
  26.   }
  27.  
  28.   s = "Netscape6/";
  29.   if ((i = ua.indexOf(s)) >= 0) {
  30.     this.isNS = true;
  31.     return;
  32.   }
  33.  
  34.   s = "Gecko";
  35.   if ((i = ua.indexOf(s)) >= 0) {
  36.     this.isNS = true;
  37.     return;
  38.   }
  39. }
  40. var browser = new Browser();
  41.  
  42. var dragObj = new Object();
  43. function dragStart(event, id) {
  44.   var x, y;
  45.   dragObj.elNode = getID(id);
  46.   // Get cursor position with respect to the page.
  47.  
  48.   if (browser.isIE) {
  49.     x = window.event.clientX + document.documentElement.scrollLeft
  50.       + document.body.scrollLeft;
  51.     y = window.event.clientY + document.documentElement.scrollTop
  52.       + document.body.scrollTop;
  53.   }
  54.   if (browser.isNS) {
  55.     x = event.clientX + window.scrollX;
  56.     y = event.clientY + window.scrollY;
  57.   }
  58.  
  59.   // Save starting positions of cursor and element.
  60.  
  61.   dragObj.cursorStartX = x;
  62.   dragObj.cursorStartY = y;
  63.   dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  64.   dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
  65.  
  66.   if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  67.   if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
  68.  
  69.   // Capture mousemove and mouseup events on the page.
  70.  
  71.   if (browser.isIE) {
  72.     document.attachEvent("onmousemove", dragGo);
  73.     document.attachEvent("onmouseup",   dragStop);
  74.     window.event.cancelBubble = true;
  75.     window.event.returnValue = false;
  76.   }
  77.   if (browser.isNS) {
  78.     document.addEventListener("mousemove", dragGo,   true);
  79.     document.addEventListener("mouseup",   dragStop, true);
  80.     event.preventDefault();
  81.   }
  82. }
  83.  
  84. function dragGo(event) {
  85.  
  86.   var x, y;
  87.  
  88.   // Get cursor position with respect to the page.
  89.  
  90.   if (browser.isIE) {
  91.     x = window.event.clientX + document.documentElement.scrollLeft
  92.       + document.body.scrollLeft;
  93.     y = window.event.clientY + document.documentElement.scrollTop
  94.       + document.body.scrollTop;
  95.   }
  96.   if (browser.isNS) {
  97.     x = event.clientX + window.scrollX;
  98.     y = event.clientY + window.scrollY;
  99.   }
  100.  
  101.   // Move drag element by the same amount the cursor has moved.
  102.  
  103.   dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  104.   dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
  105.  
  106.   if (browser.isIE) {
  107.     window.event.cancelBubble = true;
  108.     window.event.returnValue = false;
  109.   }
  110.   if (browser.isNS)
  111.     event.preventDefault();
  112. }
  113.  
  114. function dragStop(event) {
  115.  
  116.   // Stop capturing mousemove and mouseup events.
  117.  
  118.   if (browser.isIE) {
  119.     document.detachEvent("onmousemove", dragGo);
  120.     document.detachEvent("onmouseup",   dragStop);
  121.   }
  122.   if (browser.isNS) {
  123.     document.removeEventListener("mousemove", dragGo,   true);
  124.     document.removeEventListener("mouseup",   dragStop, true);
  125.   }
  126. }


html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content" style="position: absolute; top: 5%; left: 5%; width: 500px; height: 500px;">

  2. <div id="move" onMouseDown="dragStart(event, this.id);">Deze div beweegt</div>

  3. </div>

2 antwoorden

Gesponsorde links
Offline ProjectWebdesign - 04/07/2010 21:44
Avatar van ProjectWebdesign Lid Misschien kan je zo wie zo jQuery beter gebruiken.
http://jqueryui.com/demos/draggable/
Offline WouterJ - 04/07/2010 22:19
Avatar van WouterJ HTML gevorderde Hier zie je hoe je het dan in een bepaald gebied moet doen:
http://interface.eyecon.ro/demos/drag.html
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.171s