UI元件之浮出層的拖拽

2022-07-16 17:12:11 字數 1962 閱讀 1272

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的寬度就得出了浮出層到達最右邊的寬度,

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

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

CSS常用提示浮出層的寫法

css常用浮出層的寫法 div class poptip span class poptip arrow poptip arrow top em em i i span span class poptip arrow poptip arrow right em em i i span span cl...

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

浮出層是web頁面中經常用到的功能,帶有小小尖角的浮出層則更為生動,所以今天帶給大家的是有角的浮出層,一起看看吧!html 複製 如下 vslyehh hi,看到了嗎?這是常用浮出層的寫法!以上html構成了乙個浮出層和四個方向的尖角,其實你只需要其中的乙個span標籤,所以真正用上的 並沒那麼多。...

拖拽的元件化寫法

需求 d1拖拽前新增字型 d2拖動時顏色變換 d3抬起時彈出對話方塊 繼承 可以實現,不過要在各自的原型上加上自己的業務邏輯,關鍵是不能互用,而且每乙個div都要寫一套 元件化 把這些功能的函式名寫在建構函式的原型中,如果這個div要實現這個功能,就傳入對應的引數實現功能,關鍵點在於傳不同引數實現不...