0

我有以下代码（jsfiddled）。我想使用红色 SVG 矩形作为可拖动 div 元素的句柄，但是因为 SVG 元素不是 div 的子元素，所以这是不可能的。这个想法是让手柄（红色矩形）触发 div 的拖动事件，当拖动 div 时，代码会更新红色 SVG 矩形的位置。如何让 SVG 矩形充当 div 的拖动句柄（以便 SVG 元素不是 div 元素的子元素）？

我已经测试过使 SVG 成为 div 的子对象，并使用 SVG rect 作为句柄，这可以正常工作。当我拖动 SVG 矩形时，拖动时会移动 div 和 SVG 矩形。但问题是 SVG 元素本身也被拖动了。但我不希望 SVG 元素本身在拖动时移动，只有 rect 和 div。

编辑：当在 svg rect 上按下鼠标时，某种触发 div 的拖动事件作为一种可能的解决方案出现在我的脑海中，但尚未经过测试。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Draggable - Handles</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <style>
            #draggable { position:absolute; opacity:0.5;
    width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
           #draggable p { cursor: move; }
           #draggable {left:30px;top:0px;z-index:1}
        </style>
        <script>
            $(function() {
                $( "#draggable" ).draggable({ handle: "p" });
                $( "div, p" ).disableSelection();
            });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-widget-content">
            <p class="ui-widget-header">I can be dragged only by this handle</p>
        </div>
        <svg width="500" height="500" style="position:absolute;z-index:-1">
            <rect x="0" y="0" width="100" height="100" fill="#FF8888"/>
        </svg>
    </body>
</html>
4

1 回答 1

2

经过一些测试后，我最终以这种 jsfiddled 方式div.trigger(e)在可拖动 div 的拖动功能中使用组合和更新 SVG rect 的变换属性。

关键是下面这段代码，当鼠标在SVG路径元素上按下时，会触发div的拖动事件：

$("#path_1").mousedown(function(e) {
    $( "#div_1" ).trigger(e);
});

另一个关键点如下，它更新了 SVG path 元素的 transform 属性来实现移动：

drag: function(e, ui)
{
    var x=$( "#div_1" )[0].style.left;
    var y=$( "#div_1" )[0].style.top;
    x = parseInt(x);
    y = parseInt(y);
    $( "#path_1" ).attr("transform", "translate("+x+","+y+")");
}

它依赖pointer-events:none于 div，因此不适用于 Opera，但在其他新浏览器中可以。有一个 hack可以允许pointer-events:none，但最好等待所有最新的浏览器本机允许它。在问题的示例中，指针事件不是问题，因为红色矩形没有完全低于 div。

Jsfiddle 示例可以扩展到例如。如果您想使用 jQuery Draggable 插件来拖动 SVG 的图形对象并希望使用 div 作为选择矩形，请为 SVG 元素制作选择矩形功能。（选择矩形的其他可能解决方案是使用两个 SVG 根元素，一个用于选择矩形，一个用于实际形状。）

并且使用 setTimeout()我们可以强制在移动 div 时始终移动 SVG 路径。

于 2012-10-14T10:29:30.557 回答