JS實現部落格前端頁面(五) 封裝彈窗拖拽事件

2021-09-18 03:22:28 字數 845 閱讀 5317

在js實現部落格前端頁面(四)中已經實現了對彈窗元件的封裝,現在我們想要在瀏覽器視窗內可以對彈窗進行拖拽移動,就需要封裝拖拽事件。

首先我們需要了解拖拽的原理,大致分為如下幾個步驟:

將滑鼠移動到需要拖拽的物體上,按下滑鼠,觸發onmousedown事件;

按住滑鼠的同時,選中物體,並進行拖動,觸發onmousemove事件;

放開滑鼠,停止拖動,物體會停留在最後的位置,觸發onmouseup事件;

再次按下滑鼠,會重複迴圈以上操作。

注意:onmousedown按下事件只在物體物件範圍內起作用,此處指定物件為窗體loginbox即可;

但窗體的onmousemove、onmouseup事件則需在整個頁面文件範圍內起作用,應該指定物件為document.

在base.js中封裝drag()拖拽事件,**如下:

base.prototype.drag = function() 

//窗體距上的偏移量加上窗體自身的高度不超過瀏覽器的高度

if(top < 0)else if(top > window.innerheight - that.offsetheight)

//設定窗體移動後的偏移量

that.style.left = left + 'px';

that.style.top = top + 'px';

}//滑鼠放開事件

document.onmouseup = function() };}

return this;

}

window.onload = function () ;

前端頁面分頁元件 js

專案資料查詢頁,因為可能同時存在多個列表查詢,並且資料量較大,需要用到分頁,這時候自己可以寫乙個簡單的分頁元件 最基本的功能,比如資料有5頁,1,2,3,4,5 點選哪個就查詢哪一頁的資料,點選5,就查詢第5頁的資料 類似 前一頁,後一頁的翻頁功能 如果資料有230條,每頁10條資料,那麼一共有23...

js分頁實現,前端實現。

主要是借鑑了網上乙個例子,自己重新加了樣式,新增了跳轉,修改了一些小地方,用於和大家一起分享,前端分頁的技巧,的資料是我已經寫好了,其實大家也可以前端渲染 然後再分頁,都是可以的。其實分頁最關鍵是這兩句 var startrow currentpage 1 pagesize 1 currentpag...

js分頁實現,前端實現

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!主要是借鑑了網上乙個例子,自己重新加了樣式,新增了跳轉,修改了一些小地方,用於和大家一起分享,前端分頁的技巧,的資料是我已經寫好了,其實大家也可以前端渲染 然後再分頁,都是可以的。其實分頁最關鍵是這兩句 var startrow currentpa...