純js操作div移動

純js操作div移動

保留這個位置和大小

可移動   

可調整大小   

預設居中開啟   

保留位置上開啟

開啟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具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之，不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中，無論有無儲存div位...

純js可移動DIV

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

純js實現積木（div）拖動效果

doctype html html lang en head meta charset utf 8 title 拖動 title style type text css style head body id content input type button value 獲取積木 id div3 b...