How to make html map draggable

Question

My team members and I are having problems making an HTML map draggable when the mouse is over a defined area. If the user clicks on an area that isn't defined within the map, then they can drag, but if not, they can't drag.

Here's the HTML for the map:

<img src="/unknown1.jpg" id="map" usemap="#map" width="1632px" height="866px"></div></div>
<map name="map">
    <area target="" alt="O" title="O" href="" coords="1354,114,1347,203,1317,271,1209,143,1292,82" shape="poly">
    <area target="" alt="P" title="P" href="" coords="1202,142,1314,270,1254,378,1122,291,1091,203,1147,170" shape="poly">
    <area target="" alt="Q" title="Q" href="" coords="1122,297,1251,385,1261,478,1243,543,1223,602,1184,641,1157,656,1078,579,1115,532,1122,483,1111,431,1085,383,1115,347" shape="poly">
    <area target="" alt="N" title="N" href="" coords="1080,205,1115,286,1112,346,1083,381,1030,347,984,344,933,354,897,372,826,307,953,256,1010,234" shape="poly">
    <area target="" alt="M" title="M" href="" coords="759,278,811,307,919,266,1006,230,1065,207,1145,170,1196,139,1153,112,1026,168,918,206,858,208,795,201" shape="poly">
    <area target="" alt="V" title="V" href="" coords="1026,438,1083,389,1114,445,1117,490,1108,526,1091,550,1076,575,1027,519,1039,477,1034,458" shape="poly">
    <area target="" alt="R" title="R" href="" coords="883,573,798,627,896,693,995,729,1081,736,1134,710,1151,670,1150,659,1094,601,1072,586,1030,607,981,608,933,602" shape="poly">
    <area target="" alt="S" title="S" href="" coords="944,517,887,568,935,598,978,602,1020,601,1055,589,1070,584,1026,524,983,529" shape="poly">
    <area target="" alt="W" title="W" href="" coords="952,438,970,432,1003,432,1019,444,1029,464,1029,480,1023,503,1014,514,998,519,984,519,968,516,955,510,944,504,939,496,939,480,939,467,944,450" shape="poly">
    <area target="" alt="T" title="T" href="" coords="893,379,945,435,938,460,933,473,932,496,936,513,925,526,903,543,884,558,861,516,854,477,864,421" shape="poly">
    <area target="" alt="U" title="U" href="" coords="897,375,916,366,965,353,993,347,1017,349,1043,359,1069,375,1079,382,1066,398,1049,409,1029,425,1023,437,995,425,980,425,952,432" shape="poly">
    <area target="" alt="L" title="L" href="" coords="749,284,834,321,857,343,889,373,860,411,854,434,850,463,854,509,864,536,880,565,853,586,752,481,691,415" shape="poly">
    <area target="" alt="K" title="K" href="" coords="690,425,765,503,825,569,843,588,792,621,772,633,739,607,680,535,645,497" shape="poly">
    <area target="" alt="J" title="J" href="" coords="637,509,691,561,727,599,755,628,699,695,644,656,595,595,589,565,611,536,625,519" shape="poly">
    <area target="" alt="F" title="F" href="" coords="478,173,677,389,709,363,726,317,743,277,502,161" shape="poly">
    <area target="" alt="G" title="G" href="" coords="530,245,683,403,638,493,465,307" shape="poly">
    <area target="" alt="H" title="H" href="" coords="462,313,632,497,606,536,570,552,484,491,429,441,380,372" shape="poly">
    <area target="" alt="C" title="C" href="" coords="531,241,441,138,331,162,464,303" shape="poly">
    <area target="" alt="B" title="B" href="" coords="322,169,458,308,373,369,234,212,275,189" shape="poly">
    <area target="" alt="E" title="E" href="" coords="748,272,772,202,471,86,468,143,603,205" shape="poly">
    <area target="" alt="D" title="D" href="" coords="200,143,443,86,449,133,329,156,230,210" shape="poly">
</map>

We're using jquery to make the map draggable and maphilight so that sections on the map get highlighted when hovered over.

$('.center').draggable({
  scroll: false
});
  
$('#map').maphilight();

We tried using our own function to make the map draggable using this tutorial: https://www.w3schools.com/howto/howto_js_draggable.asp but it didn't work.

If you need any more code, please let me know. I would be happy to provide it.