JQuery是一種流行的JavaScript庫，它可以添加動態(tài)效果、用戶交互和動態(tài)加載到您的Web頁面。使用它的拖放功能，您可以輕松地實現(xiàn)頁面中的可拖拽DIV。

$(function(){
var draggable = false;
var startX, startY, initialMouseX, initialMouseY;
//當按下鼠標時執(zhí)行此函數(shù)
$('.draggable').mousedown(function(e){
draggable = true;
startX = $(this).offset().left;
startY = $(this).offset().top;
initialMouseX = e.clientX;
initialMouseY = e.clientY;
$(this).css('opacity', 0.7);
});
//當鼠標移動時執(zhí)行此函數(shù)
$(document).mousemove(function(e){
if(draggable){
var currentMouseX = e.clientX;
var currentMouseY = e.clientY;
var offsetX = currentMouseX - initialMouseX;
var offsetY = currentMouseY - initialMouseY;
$(this).css({
top: offsetY + startY + 'px',
left: offsetX + startX + 'px'
});
}
});
//當松開鼠標時執(zhí)行此函數(shù)
$(document).mouseup(function(){
draggable = false;
$('.draggable').css('opacity', 1);
});
});

上面的代碼使我們能拖拽一個帶有"draggable"類的DIV元素。mousedown事件觸發(fā)時，我們記錄了初始鼠標和元素位置，并將元素的透明度設(shè)置為0.7。mousemove事件觸發(fā)時，我們將元素的新位置計算為當前鼠標位置與初始位置的偏移量。最后，mouseup事件將元素的透明度設(shè)置為1，釋放元素的拖拽狀態(tài)。