Draggable from HTML droppable on SVG

Question

I am using Jquery draggable on some pins... I need them to be dropped onto paths on an SVG map and return the id of that path. I cant seem to get it to work though.

Here is a snipped of my code. Ideally if i drag the sign on to this path I want to return 'map_1' from the id but the code I have doesn't seem to do it like how it normally works with non SVG.

<div class="signs s1 draggable"></div>

<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 360" xml:space="preserve">

    <!-- regions -->
    <g id="states">
        <g>
        <!-- AL -->
        <path  class="droppable al"id="map_1" fill="#EBECED" stroke="#FFFFFF" stroke-width="1" d="M336.6,199.5l-0.199,0.4l0.5,1.1l-3.301,32.399l0.9,17.5c1.6-0.399,2.4-0.699,2.4-1
            c-0.301-0.6-0.4-1.1-0.301-1.5c0.101-1.5,0.5-1.899,1.101-1.3c0.6,0.5,1,1.4,1.399,2.7c0.301,1.3,0.801,1.9,1.5,1.6
            c0.301-0.199,1-0.5,1.9-0.8c0.6-0.8,0.8-1.399,0.6-1.8c-0.3-0.5-0.3-1.1,0-1.7c0.301-0.7,0-1.2-0.8-1.5
            c-0.899-0.399-1.2-1.2-0.6-2.3h22.5c-0.4-1.6-0.601-2.7-0.3-3.3c0.199-0.7,0.199-2-0.301-3.8c-0.199-0.801-0.199-1.2-0.3-1.301
            c0-0.1,0.101-0.6,0.3-1.6c0.101-0.6,0.4-1.2,0.9-2c0.4-0.5,0.6-1.1,0.4-1.8c-0.101-0.7-0.5-1.5-0.9-2.4
            c-0.5-0.899-0.8-1.7-0.9-2.2l-3.8-25.399H336.6z" />
         </g>
    </g>
</svg>

JS

    $('.draggable').draggable();
    $('svg path.droppable').droppable({
        accept: '.draggable',
        drop: function( event, ui ) {
            console.log('event');
            console.log(event);
            console.log('ui');
            console.log(ui);
        }
    });

Answer 1

SVG Droppable

Make use of this example...

var dropTargets = canvas.selectAll("rect").data(types).enter().append("g")

dropTargets.append("rect")
    .attr({
        width: 180,
        height: 100,
        x: 10.5,
        y: function(d,i) { return (i * 110) + .5},
        rx: 20,
        ry: 20,
        class: function(d,i) { return "color" + (i+1) }
    })

dropTargets.append("text")
    .text(function (d) { return d })
    .attr({
        x: 25.5,
        dy: 30,
        y: function(d,i) { return (i * 110) + .5}
    });

Append the svg dynamically to use like this...

Answer 2

Path element doesn't handles drop event, but it handles mouseover and mouseout events. So, you just need to use an external manager as well as it used here ( http://bl.ocks.org/thudfactor/6611441 (You don't really need d3 here)) where you can save data of the dragged element on drag start event and handle drop on stop draggable event (you just need to clarify that mouseover of the droppable fired before drop).

LMK, if you need more details on it.