javascript - 可从 HTML 拖动 可放置在 SVG 上

Question

我在一些引脚上使用 Jquery Draggable...我需要将它们拖放到 SVG map 上的路径上并返回该路径的 id。但我似乎无法让它工作。

这是我的代码片段。理想情况下，如果我将标志拖到此路径上，我想从 id 返回“map_1”，但我的代码似乎不像通常与非 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

利用这个例子...

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}
    });

动态附加 svg 以像这样使用...