jQuery是一種非常流行的JavaScript庫(kù)，它可以使JavaScript編寫變得更加簡(jiǎn)單易懂。在Web開發(fā)領(lǐng)域中，使用jQuery很方便地實(shí)現(xiàn)很多交互效果，比如自由拖拽。在本文中，我們將通過(guò)jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的div自由拖拽效果。

<div id="drag"></div>
<script>
$(document).ready(function() {
var isMove = false;//鼠標(biāo)是否按下
var obj = null;//被拖拽的div
var offsetX = 0;//鼠標(biāo)距離div的左上角的橫坐標(biāo)距離
var offsetY = 0;//鼠標(biāo)距離div的左上角的縱坐標(biāo)距離
$("#drag").mousedown(function(e) {
isMove = true;
obj = $(this);
//記錄鼠標(biāo)按下時(shí)的鼠標(biāo)位置與div的偏移量
offsetX = e.pageX - parseInt(obj.css("left"));
offsetY = e.pageY - parseInt(obj.css("top"));
//鼠標(biāo)按下后即可開始移動(dòng)
$(document).mousemove(function(e) {
if (isMove) {
//計(jì)算div的新位置
var x = e.pageX - offsetX;
var y = e.pageY - offsetY;
//設(shè)置div的新位置
obj.css({
"left": x,
"top": y
});
}
});
});
//鼠標(biāo)松開時(shí)不再移動(dòng)div
$(document).mouseup(function() {
isMove = false;
obj = null;
});
});
</script>

上述代碼中，我們創(chuàng)建了一個(gè)id為“drag”的div，通過(guò)jQuery選擇器獲取該div，并綁定mousedown、mousemove、mouseup事件。當(dāng)鼠標(biāo)按下時(shí)，記錄鼠標(biāo)位置與div的偏移量，及將isMove設(shè)置為true以記錄鼠標(biāo)是否按下。當(dāng)鼠標(biāo)移動(dòng)時(shí)，計(jì)算新位置及將div的left和top屬性設(shè)置為新位置；當(dāng)鼠標(biāo)松開時(shí)，將isMove和obj都重新初始化。該代碼實(shí)現(xiàn)了div的自由拖拽效果。