Use image map as the handle for jQuery UI Draggable

Question

I am wondering how I can use an image map on an image as the handle for jQuery draggable image. Here is what I have thus far.

JS

$('.stickyleave').draggable({
    containment:'#stickyleave-main',
    handle: "#" + $(e).find('img').attr('usemap') + " area",
    start:function(e,ui){
        ui.helper.css('z-index',++$.zIndex);
    }
});

HTML

<div class="stickyleave" />
    <img usemap="#image_map" src="' . $upload_dir['baseurl'] . '/' . $style[0] . '.png" />
    <map name="image_map" id="image_map">
        <area shape="poly" coords="4,27,27,12,45,2,65,1,83,11,91,17,99,29,89,47,60,56,39,52"/>
    </map>
</div>

But it just won't work. Any suggestion would be helpful. Thanks

Answer 1

First, $(e).find('img').attr('usemap') already contains '#'

This is a workaround to make it works

$('.stickyleave').each(function(){    
    $(this).draggable({
        containment:'#stickyleave-main',
        handle: $(this).find('img').attr('usemap'),
        start:function(e,ui){
            ui.helper.css('z-index',++$.zIndex);
        }
    });
});

​

Here is a working example http://jsfiddle.net/cFwuD/