マウスを移動してdivを回転する

Question

divを回転するには次のコードがあります。同じdivの右上隅にある画像のmousedownイベントによって。マウスを上に動かすまでdivを回転させたい論理的には、コードは問題ないと思いますが、それはクリック後に機能します。マウスアップの代わりに、他のアイテムをクリックすると回転が停止します。 ..私は、ブラウザダウンマウスが画像をドラッグしようとした後、ドラッグ上だと思うが、私は助けが必要な事前:)で感謝

fl_rotate: false, 
rotdivs: function() { 
    var pw; 
    var oThis = this; 
    $('.drop div img').mousedown(function(e) { 
     oThis.destroyDragResize(); 
     oThis.fl_rotate = true; 
     return; 
    }); 
    $(document).mousemove(function(e) { 
     if (oThis.fl_rotate) { 
      var element = $(oThis.sDiv); 
      oThis.rotateOnMouse(e, element); 
     } 
    }); 
    $(document).mouseup(function(e) { 
     if (oThis.fl_rotate) { 
      oThis.initDragResize(); 
      var ele = $(oThis.sDiv); 
      ele.unbind('mousemove'); 
      ele.draggable({ 
       containment: 'parent' 
      }); 
      ele = 0; 
      oThis.fl_rotate = false; 
     } 
    }); 
}, 
rotateOnMouse: function(e, pw) { 
    var offset = pw.offset(); 
    var center_x = (offset.left) + ($(pw).width()/2); 
    var center_y = (offset.top) + ($(pw).height()/2); 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
    var degree = (radians * (180/Math.PI) * -1) + 100; 
    //   window.console.log("de="+degree+","+radians); 
    $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
}​ 

Answer 1

私が問題だったと思う（画像をドラッグ）ネイティブドラッグイベントがしたとき、 （マウスダウン時に）発射されたため、マウスアップイベントが発生することはありませんでした。したがって、マウスダウンイベントのデフォルトアクションを防ぐだけで済みます。

ここ

あなたが作業例を持っている：

HTML：

<div class="drop"> 
    <div> 
     <img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/> 
    </div> 
</div>​ 

Javascriptを：

$(document).ready(function() { 
    // the same as yours. 
    function rotateOnMouse(e, pw) { 
     var offset = pw.offset(); 
     var center_x = (offset.left) + ($(pw).width()/2); 
     var center_y = (offset.top) + ($(pw).height()/2); 
     var mouse_x = e.pageX; 
     var mouse_y = e.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 100; 
     //   window.console.log("de="+degree+","+radians); 
     $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 

    $('.drop div img').mousedown(function(e) { 
    e.preventDefault(); // prevents the dragging of the image. 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('.drop div img')); 
    }); 
    }); 

    $(document).mouseup(function(e) { 
    $(document).unbind('mousemove.rotateImg'); 
    }); 
}); 

デモ：http://jsfiddle.net/rwBku/13/

あなただけバインド解除することができますので、私はjQueryのnamespaced eventsを使用していましたあなたがしたいmousemoveイベント。

画像の回転はバグですが、実際にはその方法を見ていないことに注意してください。

Answer 2

私はこのスタックオーバーフローの問題がHow to get mouseup to fire once mousemove complete

トリックは「ecapsulate」のMouseMoveとmouseDownイベントにイベントをMouseUpイベントには、あなたの質問に答えると思います。

Answer 3

これにはlibがあります。スタンドアロンまたはjQueryプラグインとして動作https://github.com/PixelsCommander/Propeller