Home/ Questions/Q 8930037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:47:44+00:00

Is it possible to have draggable elements and droptarget elements which are images and

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0