0

次のコードがあります( jsfiddled )。ドラッグ可能な div 要素のハンドルとして赤い SVG 四角形を使用したいのですが、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>
4

1 に答える 1

2

いくつかのテストの後div.trigger(e)、ドラッグ可能な div のドラッグ関数で、この jsfiddled wayで SVG rect の変換属性を組み合わせて使用​​することになりました。

重要なポイントは、SVG パス要素上でマウスを押したときに div のドラッグ イベントをトリガーする次のコードです。

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

もう 1 つの重要なポイントは次のとおりです。これは、SVG パス要素の 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+")");
}

divに依存しているpointer-events:noneため、Opera では機能しませんが、他の新しいブラウザーでは機能します。許可するためのハックがありますが、pointer-events:none最新のすべてのブラウザがネイティブで許可するまで待ったほうがよいでしょう。また、質問の例では、赤い四角形がdivの下に完全に収まっていないため、ポインターイベントは問題になりません。

Jsfiddle の例は、たとえば次のように拡張できます。SVG のグラフィカル オブジェクトをドラッグするために jQuery Draggable プラグインを使用し、div を選択長方形として使用する場合は、SVG 要素の選択長方形機能を作成します。(選択長方形の他の可能な解決策は、2 つの SVG ルート要素を使用することです。1 つは選択長方形用で、もう 1 つは実際の形状用です。)

setTimeout() を使用すると、常に div が移動されたときに強制的に SVG パスも移動されます。

于 2012-10-14T10:29:30.557 に答える