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/

使用image map作为jQuery UI Draggable的句柄

1 个答案: