jQuery div 拖拽是一種常用的交互方式，可以方便地實(shí)現(xiàn)拖拽效果，提升用戶體驗(yàn)。下面我們來詳細(xì)介紹如何使用jQuery實(shí)現(xiàn)div拖拽。

$(function () {
var dragging = false;
var iX, iY;
var oLeft, oTop;
$(".drag").mousedown(function (e) {
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
dragging = true;
$(this).setCapture && $(this).setCapture();
return false;
});
$(document).mousemove(function (e) {
if (dragging) {
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
oLeft = oX;
oTop = oY;
$(".drag").css({
"left": oX + "px",
"top": oY + "px"
});
return false;
}
});
$(document).mouseup(function () {
dragging = false;
$(".drag").releaseCapture && $(".drag").releaseCapture();
// 同步 left 和 top到其他地方
// code...
return false;
});
});

以上代碼中，我們?yōu)樾枰献У膁iv添加了mousedown、mousemove、mouseup三個(gè)事件，分別實(shí)現(xiàn)了當(dāng)鼠標(biāo)按下、移動(dòng)、抬起時(shí)的效果。

其中，mousedown事件中，我們獲取了當(dāng)前鼠標(biāo)點(diǎn)擊位置距離div左邊框和上邊框的距離，使得當(dāng)鼠標(biāo)按下后，div跟隨著鼠標(biāo)移動(dòng)。

mousemove事件中，我們判斷鼠標(biāo)是否正在拖拽div，如果是，獲取當(dāng)前鼠標(biāo)在屏幕上的位置和div左邊框和上邊框的距離，計(jì)算出需要移動(dòng)的距離，并設(shè)置到div樣式上。

mouseup事件中，我們?nèi)∠髽?biāo)的拖拽狀態(tài)，并同步div的位置到其他需要同步的地方。

通過以上實(shí)現(xiàn)，我們就可以很方便地實(shí)現(xiàn)jQuery div拖拽效果。