So, this is an old question, but it is a problem that I encountered this week and did not find any useful answers. The answer above does not quite explicitly mention the problem of creating a droppable from an area element on an html image map - it responds to the answer, but this answer doesn’t actually work, since creating an 'area' droppable makes the whole image map in droppable so that you cannot Determine which area is active when dropping an item.
Here is a solution that I ended up implementing for my problem (which uses poly areas):
<div id="content"> <div id="targetImage"><img src="images/interactive_bg_triColored.png" usemap="#targetOverlay" alt="Strategic Action Chart"/> <map id="targetOverlay" name="targetOverlay"> <area id="slice_0" shape="poly" coords="47, 294, 82, 178, 236, 267, 224, 293" /> <area id="slice_1" shape="poly" coords="87, 171, 168, 89, 258, 235, 240, 254" /> <area id="slice_2" shape="poly" coords="177, 82, 295, 48, 297, 228, 265, 234" /> <area id="slice_3" shape="poly" coords="302, 49, 419, 81, 334, 232, 303, 227" /> <area id="slice_4" shape="poly" coords="428, 84, 514, 170, 360, 258, 338, 239" /> <area id="slice_5" shape="poly" coords="364, 266, 516, 186, 546, 292, 373, 294" /> <area id="slice_6" shape="poly" coords="546, 307, 518, 412, 363, 333, 373, 305" /> <area id="slice_7" shape="poly" coords="512, 427, 428, 508, 340, 361, 360, 343" /> <area id="slice_8" shape="poly" coords="421, 515, 304, 549, 302, 375, 334, 365" /> <area id="slice_9" shape="poly" coords="295, 550, 180, 517, 266, 366, 295, 371" /> <area id="slice_10" shape="poly" coords="170, 512, 86, 431, 240, 340, 259, 360" /> <area id="slice_11" shape="poly" coords="80, 422, 51, 304, 228, 305, 235, 332" /> </map> </div> <div id="word_list"> <div id="instructions">Drag these action words into the appropriate category on the left.</div> <div id="word_6" class="draggable_word answer_o">Adjust</div> <div id="word_7" class="draggable_word answer_m">Infer</div> <div id="word_8" class="draggable_word answer_m">Synthesize</div> <div id="word_4" class="draggable_word answer_o">Summarize</div> <div id="word_5" class="draggable_word answer_o">Maintain<br /> Fluency</div> <div id="word_9" class="draggable_word answer_m">Make<br />Connections</div> <div id="word_11" class="draggable_word answer_p">Critique</div> <div id="word_10" class="draggable_word answer_m">Predict</div> <div id="word_2" class="draggable_word answer_o">Monitor <br />and Correct</div> <div id="word_3" class="draggable_word answer_o">Search & Use<br /> Information</div> <div id="word_0" class="draggable_word answer_p">Analyze</div> <div id="word_1" class="draggable_word answer_o">Solve Words</div> </div>
CSS:
.draggable_word { font-weight: bold; padding: 5px; width: 100px; display: inline-block } .draggable_word:hover { cursor: pointer; }
Note that you must have the width set in your .draggable class (you can name it whatever you like, but it must be applied to the element you are going to drag, in my case a div that has a small amount of text inside it)
var x1, y1 = 0; var area = []; //set of area objects var myDropTarget = 'invalid'; $(document).ready(function () { for (i = 0; i < 12; i++) { $('#word_' + i).draggable({ cursor: "move", revert: function (socketObj) { //if false then no droppable target was found if (socketObj === false) { //revert the draggable by returning true return true; } else { //the drop location was a droppable zone, now test it for answer validity var offset = $(this).offset(); //gets the x,y position of the dragged object when it stops x1 = offset.left + ($(this).width() / 2); //establishes the center of the object to use for testing x,y y1 = offset.top + ($(this).height() / 2); var result = dropTarget(x1, y1); //returns id of area or 'invalid' //logic to validate answers if (result === 'invalid') { return true; } else { //evaluate for answer correctness var testSlice = result.split('_'); if ((testSlice[1] > -1) && testSlice[1] < 6) { //first 6 slices are 'orange' if ($(this).hasClass('answer_o')) { //correct answer return false; //slice matches word answer class so do NOT revert } } else if ((testSlice[1] > 5) && testSlice[1] < 10) { //next 4 slices are 'maroon' if ($(this).hasClass('answer_m')) { //correct answer return false; //slice matches word answer class so do NOT revert } } else if ((testSlice[1] > 9 ) && testSlice[1] < 12) { //last 2 slices are 'purple' if ($(this).hasClass('answer_p')) { //correct answer return false; //slice matches word answer class so do NOT revert } } else return true; } console.log('drop ' + x1 + ', ' + y1); console.log(result); //if no correct answer was found then it will still need to revert; return true; } } }); } $('map area').each(function (i) { //this creates an array of area polygon objects so that we can test when an item has been dropped inside of one area[i] = {}; // creates a new object which will have properties for id, x coordinates, and y coordinates area[i].id = $(this).attr("id"); area[i].x = []; area[i].y = []; var coords = JSON.parse('[' + $(this).attr("coords") + ']'); var totalPairs = coords.length / 2; var coordCounter = 0; //variable to double iterate for (ix = 0; ix < totalPairs; ix++) { //fill arrays of x/y coordinates for pnpoly area[i].x[ix] = coords[coordCounter]; area[i].y[ix] = coords[coordCounter + 1]; coordCounter += 2; } }); $('#targetImage').droppable({ // maps or areas don't work well as droppable targets so we make image container div into the droppable tolerance: 'pointer' }); }); function dropTarget(dropX, dropY) { var target = 'invalid'; for (i = 0; i < area.length; i++) { //iterate through all of our area objects if (pnpoly(area[i].x.length, area[i].x, area[i].y, dropX, dropY)) { for (ix = 0; ix < area[i].x.length; ix++) { console.log(area[i].x[ix] + ', ' + area[i].y[ix]); } target = area[i].id; break; } } return target; } function pnpoly(nvert, vertx, verty, testx, testy) { //Point in Poly Test http://www.ecse.rpi.edu/~wrf/Research/Short_Notes/pnpoly.html var i, j, c = false; for (i = 0, j = nvert - 1; i < nvert; j = i++) { if (((verty[i] > testy) != (verty[j] > testy)) && (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i])) { c = !c; } } return c; }
Basically, it creates an array of objects to represent each element of 'area'. These objects have a property for ID, an array of X points and an array of Y points. Draggable elements report their center point, which is then tested to determine if it falls into a specific poly with a pnpoly function. If a match is found, it returns the identifier of the region, which allows us to apply logic to the definition of the drag and drop function of the returned functions. In this case, I used a dummy class to represent various acceptable types of responses.
In any case, I hope this helps someone in the future ...