drag drop element on image map get value

Question

I have a image map and want to drag and drop one element i.e. pin on Country Map. When the pin drops on map. I need that image map ID.

<p id="draggable" style="position: absolute; bottom: 10px; left: 40px; cursor: move; z-index:100;"><img src="images/pin1.png"/></p>
<img src="image.gif" width="145" height="126" alt="Elements" usemap="#elementmap" />
    <map name="elementmap">
    <area id="element1"  class="droppable" shape="rect" coords="0,0,82,126" alt="Element 1"/>
    <area id="element2" class="droppable" shape="circle" coords="90,58,3" alt="Element 2"/>
</map>

jQuery code is like this:

$("#draggable").draggable();
$(".droppable").droppable({
    accept: '#draggable',
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
        var targetElem = $(this).attr("id");

        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).attr("id");

        alert(targetElem);
        alert(draggableId);
        alert(droppableId);

    }
});

Here is the jsFiddle example: http://jsfiddle.net/fguru/ZKQ2x/2/

Is there any way around.

nothing, looks like it's not even going in droppable function. I tried hover function and it works fine. ( just to check the ids). $('.droppable').hover( function () { alert($(this).attr('id')); }, function () { } ); — fguru, Jul 09 '13 at 20:45
Strange, you're code is working on my system. You're sure that the right jQuery-libaries are included? No errors on Firebug/F12? — Pieter, Jul 09 '13 at 20:54
I replaced your `map`/`area` with a `div`, http://jsfiddle.net/abfnL/. Maybe you could try some different nested `div's` first? — Pieter, Jul 09 '13 at 21:12
Hi Pieter, here is the jsFiddle I have updated. http://jsfiddle.net/fguru/ZKQ2x/2/ If you do with div it works but with image map it doesn't work. — fguru, Jul 10 '13 at 11:52
Very strange, the HTML5 `ondrop` function isn't working either. — Pieter, Jul 10 '13 at 11:59
Probably you can find the X and Y of the 'drop location' and match that with your area's? — Pieter, Jul 10 '13 at 12:09
Its not being dropped on the map. Please heck this fiddle. I have added "revert: invalid" to show the functionality. http://jsfiddle.net/varunshk2/ZKQ2x/24/ I am also trying to find a solution. Once you find the solution, please update here. It will be very helpfull — varun, Mar 27 '14 at 13:28

score -1 · Accepted Answer · answered Jul 09 '13 at 21:24

-1

http://www.w3schools.com/html/html5_draganddrop.asp

Try adding draggable="true" property to your img tag

answered Jul 09 '13 at 21:24

isThisLove

269
2
4

This is not the solution. Found the issue exist even after adding this code. http://jsfiddle.net/varunshk2/ZKQ2x/24/ – varun Mar 27 '14 at 13:32

drag drop element on image map get value

1 Answers1