使用图像映射作为jQuery UI的句柄Draggable

Question

我在想如何在图像上使用图像映射作为jQuery可拖动图像的句柄。这是我到目前为止。

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> 

，但它只是将无法正常工作。任何建议都会有所帮助。由于

Answer 1

首先，$（E）.find（ 'IMG'）。ATTR（ 'USEMAP'）已经包含 '＃'

这是一种变通方法，使其工作

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

这里是一个工作示例http://jsfiddle.net/cFwuD/