1

これまでのところ、マーカー付きの円があります。

http://jsfiddle.net/x5APH/1/

マーカーをつかんで円の周りにドラッグしたいのですが、現在の機能はマーカーをクリックしたときにのみ微調整します。

マウスを押したまま円の周りにマーカーをドラッグできるようにするには、コードにどのような変更を加えることができますか?

ノート

あなたのソリューションでフィドルを更新していただければ幸いです。

4

2 に答える 2

5

一部のコードを変更しました

        $(document).ready(function(){               

            $('#marker').on('mousedown', function(){
                $('body').on('mousemove', function(event){
                    rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));    
                });

            });                    
        }); ​

このコードも追加します

$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});

関数で

これはjsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/です

于 2012-04-13T23:18:54.863 に答える
0

この種のことを行うには：

目的mousedownの要素で、次のように設定します。

  • mousemoveターゲットの位置を更新するためのドキュメントのイベント
  • mouseupmousemoveドキュメントのイベントを使用して、設定したイベントとイベントを削除しmouseupます。

プレーンJSの例：

elem.onmousedown = function() {
    document.body.onmousemove = function(e) {
        e = e || window.event;
        // do stuff with e
    };
    document.body.onmouseup = function() {
        document.body.onmousemove = document.body.onmouseup = null;
    };
};

個人的には、イベントをキャプチャするためにページ全体に「マスク」要素を作成することでこれをさらに改善したいと思います。たとえば、選択範囲または画像をドラッグしても、デフォルトのブラウザアクションがトリガーされません（これは、この場合...）

于 2012-04-13T22:27:00.240 に答える