Javascript旋轉鼠標向下拖動

我試圖在拖動鼠標時旋轉輪子。車輪由3個部分組成，因此我獨立映射每個圖像，以便定位要旋轉的車輪部分。現在它工作得很好。唯一的問題是即時通訊使用event.clientX作爲旋轉參數，它有時候可能會隨機，有時候輪子在開始時會隨機移動，但大部分時間它會工作。我只想給公式提供一個更好的旋轉參數給我的腳本。下面是代碼我目前有：Javascript旋轉鼠標向下拖動

var isDragging  = false; 

var innerWheelActive = false; 
var middleWheelActive = false; 
var outerWheelActive = false; 

$(document).ready(function() { 



    /*------------------------------------------*/ 

    $("#mapping map #middleArea").mousedown(function() { 
      isDragging = true; 
      middleWheelActive = true; 

      return false; 
    }); 

    $("#mapping map #innerArea").mousedown(function() { 
      isDragging = true; 
      innerWheelActive = true; 

      return false; 
    }); 

    $("#mapping map #outerArea").mousedown(function() { 
      isDragging = true; 
      outerWheelActive = true; 

      return false; 
    }); 

    $(document).mousemove(function(event) { 
     if (isDragging) {  

      var rotateCSS = 'rotate(' + event.clientX + 'deg)'; 
      if(innerWheelActive) 
       $('#innerWheel img').css({ '-webkit-transform': rotateCSS }); 
      else if(middleWheelActive) 
       $('#middleWheel img').css({ '-webkit-transform': rotateCSS }); 
      else if(outerWheelActive) 
       $('#outerWheel img').css({ '-webkit-transform': rotateCSS }); 

      return false; 
     } 
    }); 

    $(document).mouseup(function() { 
     if (isDragging){ 
      console.log('stopped'); 
      isDragging = false; 
      innerWheelActive = false; 
      middleWheelActive = false; 
      outerWheelActive = false; 
      return false; 
     } 
    }); 

});

來源

2012-09-28 Carlos R. Batista

[它是否幫助你（http://ammarshaikh.wordpress.com/2011/12/20/drag-object-in-circular-motion-using -jquery-ui-draggable /） – Jashwant

關於您的編輯，如果您正確拼寫「拖動」 - 「mouseup」中的「gragging」，它可能會更好。 –

嘗試添加event.preventDefault和event.stopPorpagation在回調函數：

$('img').draggable({ 
    drag: function(event, ui){ 
     var rotateCSS = 'rotate(' + ui.position.left + 'deg)'; 
     $(this).css({ '-webkit-transform': rotateCSS }); 
     event.preventDefault(); 
     event.stopPropagation(); 
    } 
});

來源

2012-09-28 15:58:01 Pierre

嘗試了它，它做了兩件事，第一它將它移動到一些隨機點，但它仍然在那裏，第二它不再旋轉拖動只需點擊:(我猜測，防止默認停止拖動跟蹤？ –

-1

你的邏輯有問題，它完全依靠X座標哪些在旋轉東西時並不總是增加。

試試這個。它會計算從初始點移動鼠標的距離，因此會考慮x和y座標。它應該工作正常。

function getDistance(x1,y1,x2,y2){ 
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1)); 
} 
var div = $("#mydiv"); 
var rotation = 0; 
var isDragging = false; 
div.mousedown(function(event) { 
    isDragging = true; 
    lastX = event.clientX; 
    lastY = event.clientY; 
}).mouseup(function(event) { 
    isDragging = false; 
}).mousemove(function(event) { 
    if (isDragging) { 
     var curX = event.clientX; 
     var curY = event.clientY; 
     rotation += getDistance(curX,curY,lastX,lastY); 
     var rotateCSS = 'rotate(' + rotation + 'deg)'; 
     $(this).css({ 
      '-webkit-transform': rotateCSS 
     }); 
     lastX = curX; 
     lastY = curY; 
    } 
})

Demo

來源

2012-09-28 18:35:05 Jashwant

這將工作在移動Safari瀏覽器也是如此嗎？ –

它應該和它的jQuery一樣，爲什麼你不測試它？ – Jashwant

我在桌面上測試過它，它非常糟糕，輪子會移動，但是以非常不穩定的方式。看看我目前有哪些工作在目前，它只需要一些精煉計算旋轉。我試着用最後和當前的座標你的帖子，就像我說它沒有太好。 –

Javascript旋轉鼠標向下拖動

回答

相關問題