0

昨日の授業で、先生が自宅でテストするためのコードをいくつか出してくれましたが、コードを動作させることができないようです。コードが想定しているのは、マウスを押したまま 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/

（また、それほど小さくサイズ変更されるとは想定されていないため、出力は恐ろしいものに見えます）

4

2 に答える 2

0

あなたの問題は、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-24T05:56:12.987 に答える
0

メインでは、最初の電卓座標を次のように設定します。

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

getStyle は一切使用しないでください。後で直接アクセスしてください。これらの2行をメインに配置するため、機能します。

于 2013-02-24T23:36:23.070 に答える