前言

在日常開發中，前端中常會使用到拖動的效果，今天就來好好的講解一下，使用javascript和html實現拖動的效果。

需求分析

要實現的效果很簡單，如下圖中，我們在藍色區域內拖動可以使得整個灰色和藍色的也一起拖動，而在灰色的界面內是無法實現拖動的。

javascript

樣式很簡單，就不多說。
其中的藍色部分的id是top，而灰色部分的id是main。

window.onload=function(){ var main = document.getElementById('main'); // 拖動 var top = document.getElementById('top'); // 設置點擊 top.onmousedown = function(event){ fndown(event,main);} }

上面部分很簡單，首先取到藍色部分的元素，和主要的元素，為top元素設置鼠標點擊事件。點擊后調用以下函數：

function fndown(event,main){event = event || window.event;var disX = event.clientX - main.offsetLeft,disY = event.clientY - main.offsetTop;document.onmousemove = function(event){event = event || window.event;fnMove(event,disX,disY,main);}top.onmouseup = function(){document.onmousemove = null;top.onmouseup = null;} }

在這個函數內，我們首先獲取到當前的鼠標位置和main元素相距上左兩面的距離，計算得出鼠標在元素內距離元素上左兩端的距離。
注意這里的拖動事件只能掛載在document上，否則只有鼠標在元素內才可以拖動，如果鼠標出了元素就無法拖動，用戶體驗不好。當然鼠標點擊的事件onmousedown和鼠標松開的事件onmouseup都是掛載在top元素上的。
下面是鼠標移動的函數：

function fnMove(event,disX,disY,main){var l = event.clientX - disX,t = event.clientY - disY；main.style.left=l+'px';main.style.top=t+'px'; }

這里我們先獲取到鼠標移動的位置，本來我們直接設置main距離左邊和上邊的距離就是鼠標位置可以實現拖動嗎？答案是可以的。鼠標位置不斷更新，main距離左邊和上邊的距離也不斷變化，是不是就實現了拖動呢。嘗試一下就發現這樣是 有bug 的。因為對位置的更新默認就是對元素的左上角的位置進行更新，如果這樣做，我們一拖動就會發現鼠標的位置變到了main元素的左上角，這樣就很不和諧。
因此我們要將鼠標距離元素邊界的位置計算出來并減去，減去過后的值就是main元素左上角距離瀏覽器左上角的距離。

總結

以上是生活随笔為你收集整理的html js 实现拖动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。