Javascript問題，我的div不會在課堂上移動

我的老師爲我們在家裏測試了一些代碼，但我似乎無法讓代碼工作。代碼假設要做的是在按住鼠標的同時移動div。我展示了我的朋友，我們認爲問題在這裏：Javascript問題，我的div不會在課堂上移動

calculator.style.top = getStyle(calculator, "top"); 
calculator.style.left = getStyle(calculator, "left"); 

function getStyle(object,styleName) 
{ 
if (window.getComputedStyle) 
    { 
    return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName); 
    } 
else if (object.currentStyle) 
    { 
    return object.currentStyle[styleName]; 
    } 
}

但我們仍然無法使其工作。幫助將非常感激。另外這裏是完整的代碼，以防萬一你需要看到它：

diffx = null; 
diffy = null; 
off = document.getElementById("buttonOff"); 
on = document.getElementById("calcButton"); 
calculator = document.getElementById("calculator"); 
calculator.style.top = getStyle(calculator, "top"); 
calculator.style.left = getStyle(calculator, "left"); 

function getStyle(object,styleName) 
{ 
if (window.getComputedStyle) 
    { 
    return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName); 
    } 
else if (object.currentStyle) 
    { 
    return object.currentStyle[styleName]; 
    } 
} 

function grabCalculator(e) 
{ 
      var evt = e || window.event; 
      calculator = evt.target || evt.srcElement; 
      var mousex = evt.clientX; 
      var mousey = evt.clientY; 
      diffx = parseInt(calculator.style.left) – mousex; 
      diffy = parseInt(calculator.style.top) – mousey; 
      addEvent(document, "mousemove", moveCalculator, false); 
      addEvent(document, "mouseup", dropCalculator, false); 
} 

function moveCalculator(e) 
{ 
      var evt = e || window.event; 
      var mousex = evt.clientX; 
      var mousey = evt.clientY; 
      calculator.style.left = mousex + diffx + "px"; 
      calculator.style.top = mousey + diffy + "px"; 
} 

function addEvent(obj, eventType, fnName, cap) 
{ 
      if (obj.attachEvent) 
      { 
         obj.attachEvent("on" + eventType, fnName); 
      } 

      else 
      { 
         obj.addEventListener(eventType, fnName, cap); 
      } 
} 

function removeEvent(obj, eventType, fnName, cap) 
{ 
      if (obj.attachEvent) 
      { 
         obj.detachEvent("off" + eventType, fnName); 
      } 

      else 
      { 
       obj.removeEventListener(eventType, fnName, cap); 
      } 
} 

function dropCalculator(e) 
{ 
      removeEvent(document,"mousemove", moveCalculator, false); 
      removeEvent(document, "mouseup", dropCalculator, false); 
} 

function main() { 
    alert("TEST"); 
    //store top and left values of calculator 
    calculator.style.top = getStyle(calculator, "top"); 
    calculator.style.left = getStyle(calculator, "left"); 
    calcButtonState = true; 

} 

window.onload = main;

再次感謝！桑德羅

編輯：添加的jsfiddle鏈接： http://jsfiddle.net/7225J/

（也是輸出看起來可怕，因爲它不是想被調整至小）

來源

2013-02-24 Mettalknight

您是否收到任何控制檯錯誤？你可以爲此做一個jsfiddle嗎？ – aug 2013-02-24 05:50:03

我覺得你的問題是在grabCalculator功能。嘗試改變：

diffx = parseInt(calculator.style.left) – mousex; 
diffy = parseInt(calculator.style.top) – mousey;

要：

diffx = parseInt(calculator.offsetLeft) – mousex; 
diffy = parseInt(calculator.offsetTop) – mousey;

也把這個主：

addEvent(..., grabCalculator, ...);

來源

2013-02-24 05:56:12 Tom

還沒破：\ 編輯：did addEvent。仍然破碎。 – Mettalknight 2013-02-24 05:59:37

你在js調試器中運行過嗎？（最好用firebug firefox）任何輸出？ – Tom 2013-02-24 06:05:38

我沒有。我沒有一個js調試器實際上哈哈。我想它的時間來得到一個吧 – Mettalknight 2013-02-24 06:10:42

主

，設置初始計算器COORDS像這樣：

calculator.style.top = 0 + "px"; 
calculator.style.left = 0 + "px";

請勿使用getStyl全部吃掉。之後直接訪問它。它會工作，因爲你把這兩條線放在主線上。

來源

2013-02-24 23:36:23

Javascript問題，我的div不會在課堂上移動

回答

相關問題