html drag and drop irregular shapes

Question

Is it possible to have draggable elements and droptarget elements which are images and whose borders are irregular shapes?

For example, if I want to have a star shape which fires a jQuery event when you mouse over it and which you can drag into another star shape, is this possible?

If I draw this as a transparent png and use an IMG tag or a div with a background image then clearly I'm going to be dragging a square elenment. I'm thinking that the answer might lie in Image Maps or SVGs?

I'd rather put them inside an HTML Canvas as I'd like the elements to still be HTML elements in their own right.

Answer 1

A simple option would be to use the image map elements to give you targetable areas on your png.

e.g.

<img class="shape" usemap="#shapeMap" border="0">
<map name="shapeMap">
    <area class="a" shape="polygon" coords="19,44,45,11,87,37,82,76,49,98">
    <area class="b" shape="rect" coords="140,132,241,179">
    <area class="c" shape="circle" coords="100,100,35">
</map>

Full example : http://jsfiddle.net/66YsR/

Answer 2

My guess is that the transparent png as a background image approach will be sufficient in your case. For most drag and drop interactions any amount of intersection between the draggable item and the target should be enough to trigger the drop. Expecting the user to make an exact fit will most likely make for a poor user experience.

It might be worth looking at jqueryui for the drag and drop functionality (if you're not already doing so) and exploring the snapMode and snapTolerance options (see documentation).

Update:

SVG is probably the best solution. You could have a look at one of the SVG libraries to handle the heavy lifting of drawing the shapes. Raphael also has built in support for drag and drop (see example here).

Just a thought, but a more lo-fi solution to the problem might be simply to centre the dragged element under the cursor when the user begins the drag interaction (the cursorAt option of jqueryui.draggable will allow you to do this). If the user clicks over the non-active area, the element will snap so it's centred under the cursor (see fiddle). Even for relatively large shapes this looks passable (at least to my eyes).