IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post.
How to Drag and Drop on an HTML5 Canvas

To modify our canvas in order to make it work in IE we need to …

  • Use ExplorerCanvas to make IE’s VML act like a canvas like object
  • Use jQuery to manage our events and make them compatible with IE
  • Use jQuery to calculate our canvas’ offsets
  • Move our call to init() to the body.onload event

Sounds like a lot but it really isn’t.

Here’s the DEMO page that should work in all current browsers including IE. The full source code for the page is listed below the canvas.

Use ExplorerCanvas to make IE’s VML act like a canvas like object

In our <head> we add a conditional reference to Google’s Explorer Canvas javascript framework so that it loads if the visitor is using IE.


<!--[if IE]><script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

The file excanvas.js can be downloaded from here…

http://code.google.com/p/explorercanvas/downloads/list

Use jQuery to manage our events and make them compatible with IE

The jQuery framework does a great job of handling events across browsers. It is the main reason that I have used jQuery in my own projects. You do not even have to download it as it is hosted by Google at.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
So simply adding a reference to it in your <head> is enough to use it.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.2/jquery.min.js"></script>

If you want to have it on your server, you can download it from here.
http://jquery.com/

Setting our event listener is a little different but we still use the same functions that we wrote in the original post How to Drag and Drop on an HTML5 Canvas.


 $("canvas").mousedown(function myDown(e){
 var position = $("canvas").position();
 if (e.clientX < x + 15 + position.left && e.clientX > x - 15 + 
  position.left && e.clientY < y + 15 + position.top && 
  e.clientY > y -15 + position.top){
    x = e.clientX;
    y = e.clientY;
    dragok = true;
    $("canvas").mousemove(function myMove(e){
       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }
});
 }
}); 
 $("canvas").mouseup(function myUp(e){
  dragok = false;
  $("canvas").mousemove(null);
}); 

Notice that we removed our traditional event listeners and wrapped the functions our events trigger with the jQuery event listeners


$("canvas").mousedown()
$("canvas").mouseup()
$("canvas").mousemove()

These are shorthand versions of the jQuery bind method. The longhand looks like this.


$("canvas").bind(mousemove, mymove())

The shorthand versions work fine and are easier to read.

Use jQuery to calculate our canvas’ offsets

Sometimes I feel as though offsets are the bane of my existence. jQuery makes them consistent across browsers with the position method.
The position method returns an object containing the position of the top-left corner of the element relative to the top-left corner of the first positioned parent of the element.
In our myDown(e) function we get our canvas’ offsets with regard to their parent.


var position = $("canvas").position();

Now we can use position.left and position.top as our offsets in calculating where our mouse is on the canvas.


       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }

Move our call to init() to the body.onload event

That’s all we have left to do.


<body onload = "init();">

This makes sure that init() isn’t called until the <canvas> is properly loaded in ExplorerCanvas.

That’s it. Here is the full source code of our modified canvas as well as a DEMO.

If you have a question that you do not want published as a public comment, then use my contact page.

One Reply to “IE Compatible Canvas Drag and Drop With jQuery and ExCanvas”

Leave a Reply

Your email address will not be published. Required fields are marked *