CSS3 拖放到任意位置
CSS3 為我們提供了很多方便的方法，其中一項(xiàng)特性就是拖放到任意位置。這一特性相信很多人都想嘗試，那么我們一起來(lái)學(xué)習(xí)如何使用它吧。
步驟：
1. 首先，我們需要先創(chuàng)建一個(gè) div，并定義一些樣式：
.dragme {
background-color: #4CAF50;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
color: white;
cursor: move;
}2. 接下來(lái)，我們需要為這個(gè) div 添加 draggable 屬性：
<div class="dragme" draggable="true">拖我試試</div>
3. 接下來(lái)，我們需要為拖動(dòng)事件添加監(jiān)聽(tīng)器。我們需要做的就是獲取相關(guān)的數(shù)據(jù)，比如鼠標(biāo)的位置和被拖拽元素的位置：
var dragme = document.querySelector('.dragme');
var startX = 0, startY = 0, deltaX = 0, deltaY = 0;
dragme.addEventListener('dragstart', function(e) {
startX = e.clientX;
startY = e.clientY;
e.dataTransfer.setDragImage(e.target, deltaX, deltaY);
}, false);
dragme.addEventListener('dragend', function(e) {
deltaX = e.clientX - startX;
deltaY = e.clientY - startY;
this.style.left = (this.offsetLeft + deltaX) + 'px';
this.style.top = (this.offsetTop + deltaY) + 'px';
}, false);4. 最后，我們需要對(duì)這個(gè) div 添加一些額外的樣式。由于我們需要能夠把它拖到任意的位置，所以我們需要將它的 position 屬性設(shè)置為 absolute，這樣才能在頁(yè)面的任意位置拖放它。
.dragme {
position: absolute;
}示例：
現(xiàn)在，我們就已經(jīng)實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的可拖拽的 div。你可以試著將其拖拽到任意位置，并查看它的效果。
拖我試試
總結(jié)：
CSS3 拖動(dòng)元素的實(shí)現(xiàn)是比較簡(jiǎn)單，只需要依靠原生 HTML5 的 drap-and-drop API 就可以完成。鼠標(biāo)拖動(dòng)元素時(shí)，其實(shí)就是將元素移動(dòng)到新的位置，因此需要計(jì)算新位置與原位置的位置偏移量。在實(shí)現(xiàn)拖動(dòng)效果之前，先要設(shè)置元素為可被拖動(dòng)的，即設(shè)置 draggable 屬性為 true。