CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Ron van der Heijden
Ron van der Heijden

Reputation: 15070

Custom made Drag and Drop canvas in HTML5

I made an little test to check out HTML 5.

In my test I have a <canvas> and want to drag this one. But I have a little problem, my canvas is kinda shaking.

Could someone help me plz?

Fiddle: http://jsfiddle.net/wnxFK/

Upvotes: 0

Views: 708

Answers (2)

Andy
Andy

Reputation: 2997

Calculating layerX and layerY once at the start of the drag helps create a smoother effect:

http://jsfiddle.net/jB5YN/

So at the start you have:

var mousedown = false;

var layerX = 0;
var layerY = 0;

function onMouseDown(event)
{
    var canvas = document.getElementById("myCanvas");
    mousedown = true;

    layerX  = event.layerX;
    layerY  = event.layerY;

    // Code
    drag(event);
}

And when you come to drag you have:

function drag(event)
{
     var clientX = ('clientX' in event) ? (event.clientX) : (event.offsetX);
     var clientY = ('clientY' in event) ? (event.clientY) : (event.offsetY);

     var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');

     var x = (event.clientX- layerX);
            var y = (event.clientY- layerY);

     var log = document.getElementById("log");
     log.innerHTML = "x: " + x + " y: " + y;

     canvas.style.left = x + 'px';
     canvas.style.top = y + 'px';
}

Also, I've moved the events to hook up only once at the start, just feels a bit neater to me!

Update

Just for a complete answer, if you want to avoid layerX and layerY which seem to be in the process of being deprecated in webkit, you can calculate them yourself:

http://jsfiddle.net/B3TYe/

The change being:

var offsetX= 0;
var offsetY= 0;

function onMouseDown(event)
{
    var canvas = document.getElementById("myCanvas");
    mousedown = true;

    var left = (canvas.style.left=="")? 0:parseInt(canvas.style.left);
    var top = (canvas.style.top=="")? 0:parseInt(canvas.style.top);

    offsetX = event.pageX - left;
    offsetY = event.pageY - top;

    // Code
    drag(event);
}

Andy

Upvotes: 1

BiAiB
BiAiB

Reputation: 14122

I wouldn't use clientX and layerX properties. Here's an example:

http://jsfiddle.net/wnxFK/3/

function drag(event)
    {
        var canvas = document.getElementById("myCanvas");

        canvas.style.left = event.pageX - 50 + 'px';
        canvas.style.top = event.pageY - 50 + 'px';
    }​

Upvotes: 0

Related Questions