jquery - 使用 CSS 和 Jquery 在鼠标按下时移动旋转立方体

Question

我正在尝试创建一个旋转立方体，用户可以通过单击立方体并拖动它来将其移动到他们想要的特定一侧。目前，当鼠标在屏幕上移动时，我有一些东西会移动，但这使得很难控制你想要的一侧，而且你无法停止立方体的旋转。

请参阅此代码笔以获取我所拥有的示例:https://codepen.io/ryan_pixelers/pen/kkVErB

使立方体旋转的jquery代码

$(function(){
  $(window).mousemove(function(e){
    $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' +     'rotateY(' + e.pageX + 'deg)');
  }); 
})

我需要这种平滑的移动，但仅限于单击鼠标时。 鼠标按下不起作用。

谢谢

Answer 1

好吧，我想我自己回答了这个问题，在问完之后:

更新了jquery:

$(function(){
  $(window).mousedown(function(){
  $(window).mousemove(function(e){
      $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' + 'rotateY(' + e.pageX + 'deg)');
  });

  $(window).mouseup(function(){
    $(this).off( "mousemove" );
  });

  }); 
})