拖拽组件增加边缘吸附

components/Draggable.js

@@ -52,6 +52,7 @@ export const Draggable = (props) => {
       if (currentObj) {
         currentObj.style.left = event.mx - offsetX + 'px'// 定义拖动元素的x轴距离
         currentObj.style.top = event.my - offsetY + 'px'// 定义拖动元素的y轴距离
+        checkInWindow()
       }
     }
 
@@ -87,11 +88,37 @@ export const Draggable = (props) => {
       return false
     }
 
+    /**
+     * 若超出窗口则吸附。
+     */
     function checkInWindow() {
       // 检查是否悬浮在窗口内
+      for (const drag of draggableElements) {
+        // 判断鼠标点击的区域是否是拖拽框内
+        const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = drag.firstElementChild
+        const { clientHeight, clientWidth } = document.documentElement
+        if (offsetTop < 0) {
+          drag.firstElementChild.style.top = 0
+        }
+        if (offsetTop > (clientHeight - offsetHeight)) {
+          drag.firstElementChild.style.top = clientHeight - offsetHeight + 'px'
+        }
+        if (offsetLeft < 0) {
+          drag.firstElementChild.style.left = 0
+        }
+        if (offsetLeft > (clientWidth - offsetWidth)) {
+          drag.firstElementChild.style.left = clientWidth - offsetWidth + 'px'
+        }
+      }
     }
 
     window.addEventListener('resize', checkInWindow)
+
+    return () => {
+      return () => {
+        window.removeEventListener('resize', checkInWindow)
+      }
+    }
   }, [])
 
   return <div className='draggable cursor-move'>

components/ThemeSwitch.js

@@ -13,7 +13,7 @@ export function ThemeSwitch() {
             <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
                     <i className="fas fa-palette mr-1 cursor-move" />
-                    <div className='uppercase font-sans' >{theme} <i className='fas fa-sync cursor-pointer border-l pl-2' title='click to change theme' alt='click to change theme' onClick={switchTheme} /></div>
+                    <div className='uppercase font-sans whitespace-nowrap' >{theme} <i className='fas fa-sync cursor-pointer border-l pl-2' title='click to change theme' alt='click to change theme' onClick={switchTheme} /></div>
                 </div>
             </div>
         </Draggable>