CSS 中的draggable屬性可以讓 div 元素的拖拽變得非常簡單。通過設(shè)置此屬性為 "true"，您可以減少許多 JavaScript 代碼。

我們來看一下如何設(shè)置一個可拖拽的 div 元素：

我可以被拖拽！

然而，這將只讓div元素被拖拽，我們還需要為其添加一些 CSS 樣式，使其看起來更好看。這里是一個示例：

div.draggable {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
cursor: move;
}

最后，我們需要一些 JavaScript 代碼來處理拖動。在當(dāng)前示例中，我們想在頁面上移動div元素，因此我們將在頁面加載時初始化拖動：

var draggable = document.querySelector('div.draggable');
var offsetX = 0;
var offsetY = 0;
draggable.addEventListener('dragstart', function(e) {
offsetX = e.offsetX;
offsetY = e.offsetY;
});
draggable.addEventListener('drag', function(e) {
e.preventDefault();
draggable.style.left = (e.pageX - offsetX) + 'px';
draggable.style.top = (e.pageY - offsetY) + 'px';
});

現(xiàn)在您可以開始拖動div元素了！