可从 HTML 拖放到 SVG 上

Posted 2023-03-06

【中文标题】可从 HTML 拖放到 SVG 上

【英文标题】：Draggable from HTML droppable on SVG

【发布时间】：2014-09-17 01:22:56

【问题描述】：

我在一些引脚上使用可拖动的 Jquery...我需要将它们拖放到 SVG 地图上的路径上并返回该路径的 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- 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);
        
    );

【参考方案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 以像这样使用...

【讨论】：

对如何使其与路径一起工作感到困惑......我是否用我的路径位替换 rect

svg drop 很忙。我从来没有这样做过。所以我给你推荐了一个链接...最好尝试使用画布拖放

【参考方案2】：

Path 元素不处理 drop 事件，但它处理 mouseover 和 mouseout 事件。因此，您只需要使用外部管理器以及此处使用的外部管理器（http://bl.ocks.org/thudfactor/6611441（您在这里并不需要 d3）），您可以在拖动 start 事件上保存拖动元素的数据并处理放置stopdraggable 事件（您只需要澄清在 drop 之前触发的 droppable 的 mouseover）。

LMK，如果您需要更多详细信息。