1

数日間壁に頭をぶつけてどこにも行かなくなったので、私がやろうとしていることが実際に実行可能であるという何らかの確認を見つけたいと思います。

DIVを使用したSVGのページがあります。SVGのコンポーネントをクリックしてドラッグできるようにしたいと思います。理論的には本当に単純です。私はこれを厄介な生のJavaScriptバージョンで持っていましたが、一貫性を保つためにJQueryでそれを実行しようとしています。

私は次のことをしました、それはコンテナDIV全体をドラッグします：

* var svgName = "/mySvg.svg";

$(document).ready(function($) {
    $('#svgDiv').svg();
    var svg = $('#svgDiv').svg('get');
    svg.load(svgName,

    function () {
        $('#svgDiv').draggable().bind('mousedown', function(event, ui) {
            $(event.target.parentElement).append( event.target );
        }).bind('drag', function(event, ui) {
            event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")");
        });
    });
});

*

これを変更しました。これは、IDによってSVGの要素を取得すると思いましたが、これは何もしません。これは、JQueryがDIVの「内部」（より良い単語が欲しい）を認識できないかのようです。*

var svgSource = "/mySvg.svg";

$(document).ready(function($) {
    $('#svgDiv').svg();
    var svgObj = $('#svgDiv').svg('get');
    svgObj.load(svgSource,
        function () {
            var svgObj2 = $('#svgDiv').svg('get');
            var svgElem = svgObj2.getElementById('pathIdOne');
            $(svgElem).draggable().bind('mousedown', function(event, ui) {
                $(event.target.parentElement).append( event.target );
            }).bind('drag', function(event, ui) {
                //event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")");
                event.target.setAttribute('x', ui.position.left);
                event.target.setAttribute('y', ui.position.top);                    
            });
        });
});

*

誰かが変更が必要な明白な何かを見ることができますか、これを行うことができますか、それともこれは完全に間違っていますか？

4

1 に答える 1

1

私は最近、この問題に数日を費やしましたが、私にとってかなりうまくいく解決策を思いつきました. これは間違いなくハックであり、すべての状況で機能するとは限りません。

このリンクには、一般的に問題を解決する方法の優れた説明があり、それは間違いなく「より良い」解決策です。しかし、JQuery の優れた Draggable API を使い続けたかったのです。

ここでフィドルで行ったことの簡単なモックアップを見ることができます。重要なアイデアは、ドラッグする svg 要素の上に正確にホバリングし続けるプロキシ div を使用することです。次に、プロキシ div をドラッグして、svg 要素の x 座標と y 座標を変更します。このようなもの：

$('#proxy').on('drag', function(e)
    {
        t = $('#background');
        prox = $('#proxy');
        t.attr('x', t.attr('x')*1
                   + prox.css('left').slice(0,-2)*1
                   - prox.data('position').left)
            .attr('y', t.attr('y')*1
                      + prox.css('top').slice(0,-2)*1
                      - prox.data('position').top);
        prox.data('position',{top : prox.css('top').slice(0,-2)*1,
                              left: prox.css('left').slice(0,-2)*1}
                  );
    });

私の場合、ドラッグしたい SVG 要素は常に画面上の特定の正方形を埋めるため、ターゲット上にプロキシ div を配置するのは非常に簡単でした。他の状況では、はるかに困難になる可能性があります。フレームの外側に背景をドラッグしないようにするために、「コンテインメント」オプションを使用することもそれほど難しくありません...注意深い計算が必要で、各ドラッグの間にコンテインメントをリセットする必要があります。

これをより多くの SVG 要素に適用できるようにするには、x 座標と y 座標ではなく変換を使用できます。

于 2013-06-21T18:00:06.073 に答える