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

// 定義變量記錄旋轉角度
var angle = 0;
// 定義draggable函數，實現拖拽
$(function() {
$( "#box" ).draggable();
});
// 定義rotatable函數，實現旋轉
$(function() {
$( "#box" ).rotatable({
start: function(event, ui) { // 旋轉開始
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)); // 計算旋轉角度
}
},
rotate: function(event, ui) { // 旋轉中
var theta = ui.angle.current - ui.angle.start + angle; // 計算旋轉角度
$(this).css({ // 設置旋轉角度
transform: 'rotate(' + theta + 'deg)'
});
}
});
});

代碼中，我們首先定義一個變量 angle 用于記錄當前旋轉角度，然后使用 draggable 和 rotatable 兩個函數實現拖拽和旋轉功能。

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

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