[英]Javascript Issue, my div won't move
昨天我的老师在课堂上放了一些代码供我们在家测试,但我似乎无法使代码正常工作。 代码要做的是在按住鼠标的同时移动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/
(输出看起来也很可怕,因为它没有被调整为这么小的大小)
我认为您的问题出在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, ...);
通常,将初始计算器坐标设置如下:
calculator.style.top = 0 + "px";
calculator.style.left = 0 + "px";
根本不要使用getStyle。 之后直接访问即可。 这将起作用,因为您将这两行放入了主行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.