CSS3 div拖拽是Web開發(fā)中的一個常見需求，通過CSS3的transform屬性和JavaScript的拖拽事件實現(xiàn)。

.draggable {
position: absolute;
cursor: move;
}
.draggable:active {
transform: scale(1.1);
}

首先，在CSS文件中定義一個draggable類，設(shè)置其position屬性為absolute，這樣可以讓其在頁面上可以隨意拖拽。同時，通過設(shè)置cursor為move，鼠標(biāo)經(jīng)過拖拽元素時會變成可拖拽的手型。

為了讓用戶拖拽元素時有更好的交互體驗，代碼中還為拖拽的div添加了一個:active偽類。通過設(shè)置其transform的scale值，讓元素在被拖拽時做出縮放的動作，可以讓用戶更加直觀地感受到拖拽的效果。

// 獲取拖拽元素
var el = document.querySelector('.draggable');
// 初始化位置參數(shù)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
// 鼠標(biāo)按下時觸發(fā)拖拽事件
el.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
// 記錄鼠標(biāo)按下時的位置
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// 鼠標(biāo)移動時觸發(fā)拖拽事件
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// 記錄鼠標(biāo)移動的距離
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// 移動元素
el.style.top = (el.offsetTop - pos2) + "px";
el.style.left = (el.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// 鼠標(biāo)釋放時清空事件
document.onmouseup = null;
document.onmousemove = null;
}

以上是使用JavaScript實現(xiàn)拖拽的代碼，主要分為三個部分。

第一部分，獲取需要拖拽的元素，并定義pos1到pos4四個位置參數(shù)，用來保存鼠標(biāo)點擊時和移動時的位置信息。

第二部分，在鼠標(biāo)按下時觸發(fā)拖拽事件，記錄鼠標(biāo)點擊時的坐標(biāo)，同時綁定鼠標(biāo)移動事件和鼠標(biāo)釋放事件。

第三部分，實現(xiàn)當(dāng)鼠標(biāo)移動時觸發(fā)的元素拖拽事件，通過獲取鼠標(biāo)移動的距離，實現(xiàn)元素的移動。當(dāng)鼠標(biāo)釋放時，清空鼠標(biāo)移動和鼠標(biāo)釋放事件。

以上是使用CSS3和JavaScript實現(xiàn)div拖拽的簡單介紹，希望能對Web開發(fā)中的拖拽需求有所幫助。