Draggable image jquerry and image map not working together

See more:

jQuery

Hi all,
i am trying to create a zoom and drag functionality for an image(Something like a Google map layout). Also wants to link certain parts of the image to some sites. But my code doesn't work for both. It works any one of the functionalities. Kindly help,if anyone knows

<link href="Styles/Drag.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>

<img src="image.png" id="draggable" class="ui-widget-content" style="width: 100%;
        height: auto;" usemap="#Image-Maps_72013121606424813" />

<map id="" name="Image-Maps_72013121606424813">
<area shape="rect" coords="124,282,268,357" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1459,292,1603,367" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1758,1358,1760,1360" href="http://www.image-maps.com/index.php?aff=mapped_users_7201312160642481" alt="Image Map" title="Image Map" />
</map>

If i remove the drag jquerry the image map works and vice versa