JS 拖拽視窗的實現

2022-08-14 04:12:09 字數 1237 閱讀 5505

分享一篇舊筆記。溫故而知新

主要思路:

1,滑鼠點選拖拉框的時候確認滑鼠距離整個被拉動視窗的左上角的位置。

2,滑鼠移動時候確認被拖動的視窗距離可視視窗左上角的位置與1所求得的值的差

3,邊界值判斷

貼上**

html:

<

div

class

="a"

>

<

div

id="all"

class

="all"

>

<

div

class

="top"

>滑鼠點選區域

div>

div>

div

css:

<

style

type

="text/css"

>

.all

.top

.astyle

>

js:

<

script

>

function

getclassname(clsname,parent)

}return

eles;

}window.onload

=drag;

function

drag()

function

fndrag(event)

//放開滑鼠

document.onmouseup

=function()}

function

fnmove(e,disx,disy)

//超出右邊間距

else

if(l

>

maxwid)

//超出上面距離

if(t

<0)

else

if(t

>

maxhei)

document.title =l

+","

+t;all.style.left =l

+"px"

; all.style.top=t

+"px"

;}script

>

效果展示:

ps:效果有一點奇葩,視窗會跑到頂部

滑鼠點選區域

以上內容,如有錯誤請指出,不甚感激。

HEX實現視窗拖拽

最近的專案有乙個這樣的需求,做乙個桌面的應用程式,不要放大 縮小 關閉按鈕。這時的視窗就無法實現拖拽功能。今天我就分享一下,用hex封裝的桌面應用程式怎麼實現拖拽功能。html頁面 如下 class fixed green leftlist 在div中可以隨意寫 div 在js檔案中可以寫如下的 w...

接受檔案拖拽視窗的實現

長期以來,我似乎都沒有對知識進行總結,寄希望於部落格吧。早上閒著沒事,想起來一篇關於拖拽的文章,第一次見到還是借助於google大俠,搜了n久才發現該文章,如今已經滿地都是中文版本了。本人堅持自力更生的原則,自己做一遍吧,不想只抄襲人家的內容,然後儲存一下就再也不看了。想把知識運用起來。廢話少說,入...

手動實現視窗支援拖拽

近一次查詢視窗拖拽事件時,發現相關 被注釋,然而仍然支援拖拽 drag and drop 有些疑惑便查了一下,發現除了使用訊息外,還可以通過實現以下介面的方式支援 應用程式幾乎都是用的ole 技術 1.idropsource 源 2.idroptarget 目標 3.idataobject 正在拖放...