UI元件之浮出層的拖拽

ui元件之浮出層

這次的這篇總結主要是參考的這篇文章：js拖拽事件例項，不過自己多做了一點分析

這次來總結一下浮出層的拖拽，期間遇到了一些小問題，不過最後也解決了，這裡也總結一下。

首先，我們要實現的效果是浮出層在滑鼠點選之後隨著滑鼠移動，鬆開之後停止移動，並且邊框不得超出邊界。

網上很多教程已經說得很清楚了，這裡就再囉嗦兩句，這個過程總共分為三步：

滑鼠點下之時用onmousedown事件記錄滑鼠點下時與浮出層的相對位置

用onmousemove事件讓浮出層跟隨滑鼠移動，每當使用者將滑鼠移動乙個畫素，就會發生乙個 mousemove 事件，我們在這個事件中改變浮出層的位置即可

用onmouseup事件在滑鼠鬆開時清除onmousemove中的事件

關於offsetwidth、offsetleft等概念的理解

接下來是**實現：

1、計算滑鼠與浮出層的相對位置

horizen.onmousedown=function(ev) //
滑鼠按下浮出層

2、根據滑鼠的移動計算出浮出層的offsetleft應有的距離,從而改變浮出層的位置，並根據此距離判斷浮出層是否超出邊界

horizen.onmousedown=function(ev) 
else
if(oleft>document.documentelement.clientwidth-horizen.offsetwidth) //
螢幕寬度減去浮出層的寬度就得出了浮出層到達最右邊的寬度
if(otop<0） 
else
if(otop>document.documentelement.clientheight-horizen.offsetheight）
console.log(oleft);
horizen.style.left=oleft+'px'; //
浮出層的left設定為新滑鼠x座標減去disx的值
horizen.style.top=otop+'px'; 
}; 
return
false; //
阻止firefox的預設事件 bug，（額……不太理解，有大神知道希望賜教）
}

3.滑鼠鬆開時清除onmousemove中的事件

document.onmouseup=function() //
滑鼠鬆開時
;

這樣我們的浮出層的拖拽就做好了……

一切看似如此完美，可是當我開啟瀏覽器除錯的時候卻發現，浮出層左邊拖拽時會超出邊界，右邊會到達不了邊界，上下也是這樣

瀏覽器也並沒有報錯，檢查了**也沒有錯誤，最後打了個斷點除錯了一下，發現在計算滑鼠相對位置時，disx（只討論x軸上的）的值比較小，究其原因是因為offsetleft過大，上網查了一下以後發現，原來是translate的原因，元素利用translate移動後不會影響offsetleft的值，意思就是它是按我向左移動前的那個浮出層計算offsetleft的，那麼offset的值自然就會變大了，並且其變大的值就是我向左移動的值（浮出層的width是400px;我想左移動了自身的50%也就是200px），所以我們需要對判定的條件進行一些修改：

if(oleft<200) //
移動前浮出層的left小於200，也就是移出左邊
else
if(oleft>document.documentelement.clientwidth-horizen.offsetwidth+200) //
螢幕寬度減去div的寬度就得出了浮出層到達最右邊的寬度，

上下也根據浮出層的高度改一下就可以了

這樣我們的浮出層拖拽的效果就真的做好了~

UI元件之浮出層的拖拽

CSS常用提示浮出層的寫法

css常用浮出層的寫法及例項

拖拽的元件化寫法

UI元件之浮出層的拖拽

CSS常用提示浮出層的寫法

css常用浮出層的寫法及例項

拖拽的元件化寫法

相關推薦