純js可移動DIV

2021-06-22 00:02:53 字數 756 閱讀 9687

保留這個位置和大小

可移動   

可調整大小   

預設居中開啟   

保留位置上開啟

開啟div

操作說明:

選中核取方塊(可移動、可調整大小)後,開啟的div具有移動/調整大小的功能(此時移動/調整大小快捷鍵可使用);

反之,不可移動/調整大小(此時移動/調整大小快捷鍵無效)

單選框預設居中開啟選中,無論有無儲存div位置和大小均以預設位置及大小開啟div

單選框保留位置上開啟選中,如果未發現儲存記錄以預設方式開啟,否則以儲存的位置及大小開啟

如果選中可移動後,滑鼠經過標題位置(藍色背景)處會變成移動的圖示,此時按住滑鼠左鍵會產生乙個半透明的div,按住滑鼠不動拉動此半透明div會跟隨移動,釋放滑鼠左鍵後會產生一段原始位置移動至半透明位置的動畫,當動畫重疊時,半透明的div將**。

如果選中可調整大小後,滑鼠經過整個div的最右下角處會變成伸縮的圖示,此時按住滑鼠左鍵會產生乙個半透明的div,按住滑鼠不動拉動此半透明div會隨著移動而調整大小,釋放滑鼠左鍵後會產生一段原始大小伸縮至半透明大小的動畫,當動畫重疊時,半透明的div將**。

div的右上角有關閉按鈕,按下後div將remove

快捷鍵說明:

ctrl + enter : 開啟div

ctrl + s(大小寫均可) : 儲存div的大小和位置

上下左右箭頭 : 輕移div位置

ctrl + 上下左右箭頭 : 輕調div大小

esc : 關閉div

純js操作div移動

純js操作div移動 保留這個位置和大小 可移動 可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後,開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之,不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中...

純js操作div移動

保留這個位置和大小 可移動 可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後,開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之,不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中,無論有無儲存div位...

js彈出可拖動div

2010 09 01 18 03 37 分類 學習總結 標籤 js彈出可移動div 字型大小大中小訂閱 文章分類 web前端彈出div同時加入背景層實現方式很多,有原創也有借助js框架實現的,這些彈出的div功能都比較強悍,實際專案中有時候根本不需要如此般複雜操作,只 是彈出div進行資料展現或者是...