帶鼠標移動的旋轉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」鼠標移動和mouseup在MouseDown事件中的事件。

Answer 3

這是一個lib。作品獨立或作爲jQuery插件https://github.com/PixelsCommander/Propeller