8

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)');
}​
4

3 に答える 3

2

問題は、(画像をドラッグした) ネイティブ ドラッグ イベントが (マウス ダウンで) 発生したときに、マウス アップ イベントの発生を妨げていたことだと思います。したがって、マウス ダウン イベントのデフォルト アクションを防止する必要があります。

ここに実際の例があります：

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 の名前空間イベントを使用したので、必要な mousemove イベントのみをバインド解除できます。

画像の回転にはバグがあることに注意してください。しかし、私は実際にその方法を見ていませんでした。

于 2012-06-16T22:18:23.553 に答える
2

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

于 2014-02-04T14:06:25.977 に答える
0

このスタックオーバーフローの質問はあなたの質問に答えると思いますmousemoveが完了したらmouseupを起動する方法

秘訣は、mousemoveイベントとmouseupイベントをmousedownイベントに「カプセル化」することです。

于 2012-06-19T09:36:57.630 に答える