I'm making a small jigsaw like puzzle in html5. Each jigsaw piece is it's own canvas. I need to move the canvas element using the mouse position. I've managed to get the canvas that is clicked, I just need to move it. I tried manipulating the top and left style attributes but the canvas didn't move. Can this be done or am I trying something impossible.

Thanks!

function MouseDown(can, e)
{
    MovingCanvas = can;
    clicked = true;
}

function MouseMove(e)
{
    if(clicked)
    {
        var mx = e.clientX;
        var my = e.clientY;

        MovingCanvas.style.top = my;
        MovingCanvas.style.left = mx;
    }
}

I'm making a small jigsaw like puzzle in html5. Each jigsaw piece is it's own canvas. I need to move the canvas element using the mouse position. I've managed to get the canvas that is clicked, I just need to move it. I tried manipulating the top and left style attributes but the canvas didn't move. Can this be done or am I trying something impossible.

Thanks!

function MouseDown(can, e)
{
    MovingCanvas = can;
    clicked = true;
}

function MouseMove(e)
{
    if(clicked)
    {
        var mx = e.clientX;
        var my = e.clientY;

        MovingCanvas.style.top = my;
        MovingCanvas.style.left = mx;
    }
}

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow edited Sep 23, 2013 at 9:44 Vinay 6,87744 gold badges3434 silver badges5151 bronze badges asked Sep 23, 2013 at 9:42 JamesTJamesT 4722 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

e.clientX and e.clientY are integers.

Styles expect a string of the form {NUMBER}{UNIT}.

You are missing a unit, therefore it won't work.

MovingCanvas.style.top = my+"px";
MovingCanvas.style.left = mx+"px";