Question

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

这是我的代码剪辑。理想情况下，如果我将标志拖到此路径上，我想返回＆＃39; map_1＆＃39;来自id，但我所拥有的代码似乎并不像它通常与非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以便像这样使用......

Answer 2

Path元素不处理drop事件，但它处理mouseover和mouseout事件。所以，你只需要使用外部管理器以及它在这里使用它（http://bl.ocks.org/thudfactor/6611441（这里你真的不需要d3）），你可以在拖动start事件中保存被拖动元素的数据并处理stop可拖动事件的丢弃（您只需要澄清丢弃之前发出的droppable的mouseover）。

LMK，如果您需要更多细节。

可以从SVG上的HTML droppable拖拽

2 个答案: