Question

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

我已经测试过使SVG成为div的子节点并使用SVG rect作为句柄，这正常工作。当我拖动SVG rect时，拖动时会移动div和SVG rect。但问题是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>

如何使用除子元素之外的其他元素作为拖动句柄？

0 个答案: