實現拖拽的核心是將鼠標事件與DOM元素的移動或變形等事件聯系起來。一般地，我們可以先定義一個div元素，如下例：

<div id="wrapper" style="width:200px;height:200px;background-color:pink;">
<div id="draggable" style="width:100px;height:100px;background-color:gray;">
</div>
</div>

在CSS中定義div元素的尺寸和顏色等特征。接著，我們為div元素添加事件監聽器，如下所示：

var draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', dragStart);
function dragStart (e) {
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
}
function drag (e) {
draggable.style.left = e.clientX + 'px';
draggable.style.top = e.clientY + 'px';
}
function dragEnd (e) {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', dragEnd);
}

上述代碼定義了三個事件監聽器函數，用于監聽mousedown、mousemove以及mouseup事件。當mousedown事件發生時，dragStart函數將注冊mousemove和mouseup事件，并綁定到整個文檔上。當鼠標移動時，drag函數將更新拖拽元素的位置。當mouseup事件被觸發時，dragEnd函數取消mousemove和mouseup事件監聽器的綁定。

此時我們可以嘗試拖拽拖拽元素，但是注意到拖拽元素在鼠標移出了其所在的div元素后仍然可以被拖拽。也就是說，鼠標移出了拖拽元素的offsetParent元素，但仍然可以對其產生拖拽效果。如何禁止這種效果？

在本例中我們可以添加如下代碼，用來阻止拖拽元素的下層元素的事件傳遞：

draggable.addEventListener('mousedown', function(e) {
e.preventDefault();
... 
});

設置e.preventDefault()函數可以阻止鼠標事件的傳遞，從而實現拖拽元素僅在mouse在其上方時才能被拖動。這樣，整個div拖拽的過程就可以更加流暢、自然了。

然而，與較早的瀏覽器版本不兼容的問題始終存在。比如，在IE6及其以下版本中，而非使用MouseEvent對象，我們需要使用window.event來獲取鼠標事件。因此，在拖拽代碼中，我們需要添加如下一部分代碼，用來實現對IE6等瀏覽器的兼容性：

var e = e || window.event;
var clientX = e.clientX || e.pageX;
var clientY = e.clientY || e.pageY;

同時，在定義樣式時需要特別注意IE6以下的瀏覽器對margin的處理機制。在IE6以下版本的瀏覽器中，對div元素的margin進行設置往往會導致拖拽元素位置的偏差。因此在編寫css樣式時，應當將margin的定義去掉，避免出現無法預知的拖拽錯誤。

本文針對javascript div拖拽技術進行了簡單的介紹，同時提供了一些實現過程中的注意事項。我們建議閱讀者在開發中要對不同版本的瀏覽器進行兼容，而非假定該技術只在現代瀏覽器中獲得支持。此外，我們建議將拖拽功能引入到開發工具包或插件中，便于用來提高開發的效率。