<div>能拖動 (Draggable) 是一種在網頁開發中常見的功能，它允許用戶通過鼠標或觸摸操作來移動一個元素。通常使用JavaScript來實現這一功能。本文將詳細介紹幾個使用<div>實現拖動的代碼案例。

代碼案例一：

<div id="draggable" style="background-color: #f1f1f1; width: 200px; height: 200px; cursor: move;">
拖動我
</div>
<br>
<script>
var draggableElement = document.getElementById('draggable');
<br>
  draggableElement.addEventListener('mousedown', dragStart);
draggableElement.addEventListener('mousemove', drag);
draggableElement.addEventListener('mouseup', dragEnd);
<br>
  var offsetX, offsetY;
<br>
  function dragStart(e) {
offsetX = e.clientX - draggableElement.offsetLeft;
offsetY = e.clientY - draggableElement.offsetTop;
}
<br>
  function drag(e) {
if (e.buttons !== 1) return;
<br>
    draggableElement.style.left = (e.clientX - offsetX) + 'px';
draggableElement.style.top = (e.clientY - offsetY) + 'px';
}
<br>
  function dragEnd(e) {
offsetX = 0;
offsetY = 0;
}
</script>

在上述代碼案例中，通過給<div>元素添加事件監聽器，實現了拖動功能。當鼠標按下時，記錄下鼠標相對于<div>元素的偏移量。鼠標移動時，計算出<div>元素的新位置，并將其應用到元素的樣式中。當鼠標松開時，重置偏移量，以便下一次拖動。

代碼案例二：

<style>
.draggable {
background-color: #f1f1f1;
width: 200px;
height: 200px;
cursor: move;
position: absolute;
}
</style>
<br>
<div id="draggable1" class="draggable" style="left: 100px; top: 100px;">
拖動我
</div>
<br>
<script>
var draggableElement1 = document.getElementById('draggable1');
<br>
  draggableElement1.addEventListener('mousedown', dragStart1);
<br>
  function dragStart1(e) {
e.preventDefault();
<br>
    var initialX = e.clientX - draggableElement1.offsetLeft;
var initialY = e.clientY - draggableElement1.offsetTop;
<br>
    document.addEventListener('mousemove', drag1);
document.addEventListener('mouseup', dragEnd1);
<br>
    function drag1(e) {
draggableElement1.style.left = (e.clientX - initialX) + 'px';
draggableElement1.style.top = (e.clientY - initialY) + 'px';
}
<br>
    function dragEnd1() {
document.removeEventListener('mousemove', drag1);
document.removeEventListener('mouseup', dragEnd1);
}
}
</script>

上述代碼案例中使用了CSS中的絕對定位，<div>元素的初始位置由style屬性指定。通過給整個文檔添加事件監聽器，實現在<div>元素上按下鼠標時開始拖動，移動鼠標時更新<div>元素的位置，釋放鼠標鍵時結束拖動。

代碼案例三：

<style>
.draggable2 {
background-color: #f1f1f1;
width: 200px;
height: 200px;
cursor: move;
position: relative;
}
</style>
<br>
<div id="draggable2" class="draggable2">
<div id="handle" style="background-color: #ccc; width: 50px; height: 50px;">
拖動我
</div>
</div>
<br>
<script>
var draggableElement2 = document.getElementById('draggable2');
var handleElement = document.getElementById('handle');
<br>
  handleElement.addEventListener('mousedown', dragStart2);
<br>
  function dragStart2(e) {
e.preventDefault();
<br>
    var initialX = e.clientX;
var initialY = e.clientY;
<br>
    document.addEventListener('mousemove', drag2);
document.addEventListener('mouseup', dragEnd2);
<br>
    function drag2(e) {
var deltaX = e.clientX - initialX;
var deltaY = e.clientY - initialY;
<br>
      draggableElement2.style.left = (draggableElement2.offsetLeft + deltaX) + 'px';
draggableElement2.style.top = (draggableElement2.offsetTop + deltaY) + 'px';
<br>
      initialX = e.clientX;
initialY = e.clientY;
}
<br>
    function dragEnd2() {
document.removeEventListener('mousemove', drag2);
document.removeEventListener('mouseup', dragEnd2);
}
}
</script>

上述案例中，利用了事件委托的方式，將事件監聽器綁定到了一個內部的子元素上。當鼠標按下子元素時，更新<div>元素的位置。

通過以上幾個例子，我們可以實現<div>元素的拖動功能。借助JavaScript的事件監聽和樣式操作，我們可以靈活地實現各種用戶交互效果。