HTML元素拖拽功能實現(xiàn)的完整實例

更新時間：2020年12月04日 10:37:21 作者：lian_老練

這篇文章主要給大家介紹了關(guān)于HTML元素拖拽功能實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1 需要了解的知識點

1.1 offset（偏移量）

定義：元素在屏幕上占用的所有的可見的空間。

元素可見的大小由其高度、寬度決定，包括所有內(nèi)邊距、滾動條和邊框大小四個屬性

offsetHeight：元素正在垂直方向上占用的大小空間，單位為px，不包括margin值。只讀屬性。

offsetWidth：元素在水平方向上占用的大小空間，單位為px，不包括margin值。只讀屬性。

offsetLeft：元素的左外邊框至包含元素的左內(nèi)邊框之間的距離，單位為px。只讀屬性。

offsetTop：元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離，單位為px。只讀屬性。

offsetParent：是一個元素最近的并且是定位過(relative || absolute)的父元素，如果沒有父元素或者是父元素中沒有一個是定位過的，返回值就是body元素。只讀屬性。

element.offsetLeft和element.offsetTop取值問題，分多種情況：

如果element是body的直接子元素，返回值則是element距離body左側(cè)或頂部的距離；

如果element不是body的直接子元素，在父元素進行定位(relative或absolute)的情況下，各瀏覽器返回值都是element距離父元素左側(cè)或者是頂部的距離（唯一的區(qū)別就是chrome沒有把邊框計算進去，IE、firefox都計算進去了）；

如果element不是body的直接子元素，父元素也沒有進行定位的情況下，各瀏覽器返回的直接是element元素距body的距離。

從上面可以看出offsetLeft、offsetTop返回的值就是element到offsetParent的距離，這個offsetParent是什么元素要看ele的父元素有沒有進行定位（relative、absolute）。

1.2 client（客戶區(qū)）

定義：元素的客戶區(qū)大小（client dimension）指的是元素內(nèi)容及其內(nèi)邊距所占距的空間大小。

clientWidth：元素內(nèi)容區(qū)寬度 + 左右內(nèi)邊距寬度，單位為px。內(nèi)聯(lián)元素以及沒有 CSS 樣式的元素的clientWidth屬性值為 0。該屬性包括內(nèi)邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。只讀屬性。

clientHeight：元素內(nèi)容區(qū)高度 + 上下內(nèi)邊距高度，單位為px。內(nèi)聯(lián)元素以及沒有 CSS 樣式的元素的clientHight屬性值為 0。該屬性包括內(nèi)邊距，但不包括水平滾動條（如果有）、邊框和外邊距。只讀屬性。

clientLeft：表示一個元素的左邊框的寬度，單位為px。如果元素在左側(cè)（右側(cè)滾動條不算）有垂直滾動條，則該屬性包括滾動條的寬度。clientLeft不包括左外邊距和左內(nèi)邊距。只讀屬性。

clientTop：表示一個元素的上邊框的寬度，單位為px。如果元素在頂部（底部滾動條不算）有水平滾動條，則該屬性包括滾動條的寬度。clientTop不包括上外邊距和上內(nèi)邊距。只讀屬性。

1.3 scroll（滾動區(qū)域）

我們一般看到的默認滾動條的寬度是17px。

滾動大小：指的是包含滾動內(nèi)容的元素的大小。

scrollHeight: 在沒有滾動條的情況下，元素內(nèi)容的總高度，單位為px。該尺寸包括元素的padding，但不包括元素的border、margin和水平滾動條寬度（如果存在）。

scrollWidth：在沒有滾動條的情況下，元素內(nèi)容的總寬度，單位為px。該尺寸包括元素的padding，但不包括元素的border、margin和垂直滾動條的寬度（如果存在）。

scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素值，通俗的解釋就是元素水平滾動條到元素左邊的距離。通過設(shè)置這個屬性值可以改變元素的滾動位置。

scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素值，通俗的解釋就是元素垂直滾動條到元素上方的距離。通過設(shè)置這個屬性值可以改變元素的滾動位置。

1.4 window（窗口）

window.innerHeight：返回窗口的文檔顯示區(qū)的高度。

window.innerWidth：返回窗口的文檔顯示區(qū)的寬度。

window.outerWidth和window.outerHeight屬性獲取加上工具條與滾動條窗口的寬度與高度。

在Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個框架訪問）。在Opera中，這兩個屬性的值表示頁面視圖容器的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區(qū)的大小（減去邊框?qū)挾龋?。在Chrome中，outerWidth.outerHeight與innerWidth，innerHeight返回相同的值，即視口(viewport)大小而非瀏覽器窗口大小。
IE沒有提供取得當前瀏覽器窗口尺寸的屬性。不過，它通過DOM提供了頁面可見區(qū)域的相關(guān)信息。
在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和
document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標準模式下才有效。如果是混雜模式，就必須通過docrunent.body.clientWidth和document.body.clientHeight取得相同信息。而對于混雜模式下的Chrome，則無論通過docurnent.documentElement還是document.body中的clientWidth和clientHeight屬性，都可以取得視口的大小。

1.5 鼠標事件對象（mouseEvent）的一些屬性

mEvent.clientX：返回鼠標觸點相對于瀏覽器可見視區(qū)(或有效區(qū)域)左邊沿的的X坐標，不包括任何滾動偏移，單位為px。這個值會根據(jù)用戶對可見視區(qū)的縮放行為而發(fā)生變化。

mEvent.clientY：返回鼠標觸點相對于瀏覽器可見視區(qū)(或有效區(qū)域)上邊沿的的Y坐標，不包括任何滾動偏移，單位為px。這個值會根據(jù)用戶對可見視區(qū)的縮放行為而發(fā)生變化。

mEvent.pageX：鼠標觸點相對于HTML文檔左邊沿的的X坐標，單位為px。和clientX 屬性不同，這個值是相對于整個html文檔的坐標，和用戶滾動位置無關(guān)。因此當存在水平滾動的偏移時，這個值包含了水平滾動的偏移。

mEvent.pageY：鼠標觸點相對于HTML文檔上邊沿的的Y坐標，單位為px。和clientY 屬性不同，這個值是相對于整個html文檔的坐標，和用戶滾動位置無關(guān)。因此當存在垂直滾動的偏移時，這個值包含了垂直滾動的偏移。

mEvent.screenX：返回鼠標觸點相對于屏幕左邊沿的X坐標，單位為px。不包含頁面滾動的偏移量。

mEvent.screenY：返回鼠標觸點相對于屏幕上邊沿的Y坐標，單位為px。不包含頁面滾動的偏移量。

mEvent.offsetX：當鼠標事件發(fā)生時，鼠標觸點距離事件源元素左側(cè)的X軸方向上的距離，單位為px。

mEvent.offsetY：當鼠標事件發(fā)生時，鼠標觸點距離事件源元素頂部的Y軸方向上的距離，單位為px。

2 示例演示

2.1 元素水平拖拽效果實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>
 window.onload = () => {
 //獲取拖拽實驗對象
 let el=document.getElementById("blackSquare");
 //在該對象上綁定鼠標點擊事件
 el.onmousedown = (e) => {
 //鼠標按下，計算鼠標觸點距離元素左側(cè)的距離
 let disX = e.clientX - el.offsetLeft;
 document.onmousemove = function (e) {
 //計算需要移動的距離
 let t = e.clientX - disX;
 //移動當前元素
 if (t >= 0 && t <= window.innerWidth - el.offsetWidth) {
 el.style.left = t + 'px';
 } 
 };
 //鼠標松開時，注銷鼠標事件，停止元素拖拽。
 document.onmouseup = function (e) {
 document.onmousemove = null;
 document.onmouseup = null;
 };
 } 
 }
</script>
</html>

2.2 元素垂直拖拽效果實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>
 window.onload = () => {
 //獲取拖拽實驗對象
 let el=document.getElementById("blackSquare");
 //在該對象上綁定鼠標點擊事件
 el.onmousedown = (e) => {
 //鼠標按下，計算鼠標觸點距離元素左側(cè)的距離
 let disY = e.clientY - el.offsetTop;
 document.onmousemove = function (e) {
 //計算需要移動的距離
 let t = e.clientY - disY;
 //移動當前元素
 if (t >= 0 && t <= window.innerHeight - el.offsetHeight) {
 el.style.top = t + 'px';
 } 
 };
 //鼠標松開時，注銷鼠標事件，停止元素拖拽。
 document.onmouseup = function (e) {
 document.onmousemove = null;
 document.onmouseup = null;
 };
 } 
 }
</script>
</html>

2.3 元素任意方向拖拽效果實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>
 window.onload = () => {
 //獲取拖拽實驗對象
 let el=document.getElementById("blackSquare");
 //在該對象上綁定鼠標點擊事件
 el.onmousedown = (e) => {
 //鼠標按下，計算鼠標觸點距離元素左側(cè)和頂部的距離
 let disX = e.clientX - el.offsetLeft;
 let disY = e.clientY - el.offsetTop;
 document.onmousemove = function (e) {
 //計算需要移動的距離
 let tX = e.clientX - disX;
 let tY = e.clientY - disY;
 //移動當前元素
 if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) {
 el.style.left = tX + 'px';
 } 
 if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) {
 el.style.top = tY + 'px';
 } 
 };
 //鼠標松開時，注銷鼠標事件，停止元素拖拽。
 document.onmouseup = function (e) {
 document.onmousemove = null;
 document.onmouseup = null;
 };
 } 
 }
</script>
</html>