JQuery是一個簡單易用的JavaScript框架，可以幫助開發(fā)人員快速地構(gòu)建響應(yīng)式網(wǎng)頁。其中拖拽與旋轉(zhuǎn)是常用的交互方式。下面示例演示如何使用JQuery實現(xiàn)拖拽與旋轉(zhuǎn)功能：

// 定義變量記錄旋轉(zhuǎn)角度
var angle = 0;
// 定義draggable函數(shù)，實現(xiàn)拖拽
$(function() {
$( "#box" ).draggable();
});
// 定義rotatable函數(shù)，實現(xiàn)旋轉(zhuǎn)
$(function() {
$( "#box" ).rotatable({
start: function(event, ui) { // 旋轉(zhuǎn)開始
var css = ui.helper.css("transform"); // 獲取transform屬性值
if (css) {
var values = css.split('(')[1].split(')')[0].split(','); // 拆分transform值
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a * a + b * b); // 計算scale
angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); // 計算旋轉(zhuǎn)角度
}
},
rotate: function(event, ui) { // 旋轉(zhuǎn)中
var theta = ui.angle.current - ui.angle.start + angle; // 計算旋轉(zhuǎn)角度
$(this).css({ // 設(shè)置旋轉(zhuǎn)角度
transform: 'rotate(' + theta + 'deg)'
});
}
});
});

代碼中，我們首先定義一個變量 angle 用于記錄當(dāng)前旋轉(zhuǎn)角度，然后使用 draggable 和 rotatable 兩個函數(shù)實現(xiàn)拖拽和旋轉(zhuǎn)功能。

在 rotatable 函數(shù)中，我們使用了 start 和 rotate 兩個事件分別處理旋轉(zhuǎn)開始和旋轉(zhuǎn)中的情況。start 事件中，我們獲取當(dāng)前元素的 transform 屬性，根據(jù) a 和 b 值計算出當(dāng)前旋轉(zhuǎn)角度。在 rotate 事件中，我們根據(jù)當(dāng)前元素的旋轉(zhuǎn)角度和鼠標(biāo)拖拽的移動角度計算出新的旋轉(zhuǎn)角度，然后通過 CSS transform 屬性設(shè)置該角度即可實現(xiàn)旋轉(zhuǎn)效果。

總之，JQuery提供了豐富的交互組件和事件，可以很方便地實現(xiàn)拖拽和旋轉(zhuǎn)等效果。