用鼠标移动旋转 div答案

【问题标题】：rotating div with mouse move用鼠标移动旋转 div
【发布时间】：2012-06-18 13:59:15
【问题描述】：

我有以下代码来旋转 div。通过同一 div 右上角的图像上的 mousedown 事件。我希望 div 旋转直到鼠标向上。从逻辑上讲，我相信代码很好，但点击后它就可以工作。当我单击其他项目时，旋转停止而不是 mouseup。我认为在鼠标向下拖动后，浏览器会尝试拖动图像，但我需要帮助..提前谢谢:)

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

【问题讨论】：

你能用一些例子创建一个jsfiddle.net吗？
您是否发布了所有相关代码？
您能否对事件进行控制台记录以查看它们是否在您认为应该发生的时候发生？从您写的内容中，我了解到第一个 mousedown 事件仅在单击后触发，随后第二次单击激活 mouseup 事件，该事件禁用旋转，因为 fl_rotate 设置为 true。然而，这听起来像是 mouseup 事件在 mousedown 之前触发？！？

标签： javascript jquery jquery-ui css

【解决方案1】：

为此有一个库。独立工作或作为 jQuery 插件工作https://github.com/PixelsCommander/Propeller

【讨论】：

【解决方案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 的 namespaced events，所以你可以只解绑你想要的 mousemove 事件。

请注意，图片的旋转是有问题的，但我真的没有看那个方法。

【讨论】：

【解决方案3】：

我认为这个堆栈溢出问题回答了你的问题How to get mouseup to fire once mousemove complete

诀窍是在 mousedown 事件中“封装”mousemove 和 mouseup 事件。

【讨论】：