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要實現這個功能,就傳入對應的引數實現功能,關鍵點在於傳不同引數實現不...