用原生JS實現HTML5的元素拖拽功能
阿新 • • 發佈：2019-01-29
昨天遇到的一個面試題，題目是這樣的：
頁面上有個元素A和帶放置元素B，實現將A拖拽並且下放到B，然後改變B的顏色。
以下都是廢話，抒發一下心情請跳過，直接看程式碼吧
昨天寫的比較簡陋，今天想想在寫一遍做個記錄，越來越感受到每次面試都是一次很好的學習的機會。發現自己的不足，然後繼續前進。
希望昨天的面試s可以順利通過，希望最後一個收穫一個滿意的offer吧！
程式碼如下：
大家有更好的實現方法，不妨跟我分享一下吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,html{ margin: 0; padding: 0; } #boxA{ width: 30px; height:30px; background-color: deeppink; position: absolute; z-index: 2; } #boxB{ width: 100px; height:100px; background-color: deepskyblue; position: relative; left: 50px; top: 50px; z-index: 1; } .wrap{ /*position: relative;*/ padding: 20px; } </style> </head> <body> <div class="wrap" id = "wrap"> <div id="boxA"></div> <div id="boxB"></div> </div> </body> <script> window.onload=function () { var elementA = document.getElementById("boxA"); var elementB = document.getElementById("boxB"); // clientWidth和clientHeight: 該屬性指的是元素的可視部分寬度和高度，即padding+content， //保留A的原始位置，在A如果未被拖進去B的時候將其還原回到原來的位置 var initialPositionA={ left:elementA.offsetLeft, top:elementA.offsetTop } //B的位置 var positionB = { xL: elementB.offsetLeft, xR: elementB.offsetLeft + elementB.clientWidth, yT: elementB.offsetTop, yB: elementB.offsetLeft + elementB.clientHeight } var flag = false;//檢測onmousedown事件 var inB = false;//檢測元素A是否在元素B中 elementA.onmousedown = function () { flag = true; } document.onmousemove = function (event) { if(flag){ var positionA = { x: event.pageX, y: event.pageY } elementA.style.left = (positionA.x - elementA.clientWidth) +"px"; elementA.style.top = (positionA.y - elementA.clientHeight)+"px"; elementA.style.opacity = "0.5" inB=false; //只是經過但是未放置，所以再次置為false if( positionB.xL<=positionA.x && positionA.x<= positionB.xR && positionB.yT<=positionA.y&& positionA.y<= positionB.yB){ inB=true;//放置在B中 } } } document.onmouseup = function (event) { if(inB){ //在B中將B變色 elementA.style.opacity = "1"; elementB.style.backgroundColor = "green" } else{ //不在B中將A還原回到原來的位置 elementA.style.left = initialPositionA.left +"px"; elementA.style.top = initialPositionA.top +"px"; elementA.style.opacity = "1" } inB = false; flag = false; } } </script> </html>