jQuery是一個優秀的JavaScript庫，它的特點是簡單易學、功能強大。其中，jQuery的拖拽功能極為實用，可用于很多網頁的實現中。下面介紹如何使用jQuery的拖拽功能實現div自由拖動。

//html代碼
<div class="drag"></div>
//CSS代碼
.drag{
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
}
//JavaScript代碼
$(document).ready(function(){
$('.drag').mousedown(function(e){
var disX = e.pageX - $(this).offset().left;
var disY = e.pageY - $(this).offset().top;
$(document).mousemove(function(e){
var l = e.pageX - disX;
var t = e.pageY - disY;
$('.drag').css({'left':l,'top':t});
})
$(document).mouseup(function(){
$(document).off('mousemove');
$(document).off('mouseup');
})
})
})

首先，在HTML中添加一個class為“drag”的div，并在CSS中設置其寬、高、背景顏色和定位。接著，在JavaScript中為其添加mousedown事件，記錄鼠標相對于該div的坐標值，并添加mousemove事件，讓div跟隨鼠標拖拽移動。最后，再添加mouseup事件，讓div停止跟隨鼠標移動。

通過以上代碼，我們就可以實現div自由拖動的效果了。使用jQuery的拖拽功能，可以大大減少我們的開發難度，提高開發效率。