jquery - 使用图像映射作为 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);
        }
    });
});

​</p>

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