イメージマップを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/