diff --git a/src/css/site.css b/src/css/site.css
index 1fbdcb6..f74fb24 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -186,6 +186,11 @@ a:visited {
 	cursor: move;
 }
 
+#box.drag-over {
+	outline: 3px dashed #4074db;
+	outline-offset: -8px;
+}
+
 .outputColumn {
 	margin-top: 15px;
 	margin-bottom: 15px;
@@ -374,6 +379,60 @@ a:visited {
 	padding-right: 10px;
 }
 
+.col-toolbar button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	vertical-align: top;
+}
+
+.toolbar-icon {
+	flex-shrink: 0;
+	margin-left: -4px;
+	margin-top: -3px;
+}
+
+.toolbar-label {
+	display: none;
+	font-size: 14px;
+	white-space: nowrap;
+}
+
+@media (min-width:1100px) {
+	.col-toolbar {
+		width: 120px;
+	}
+
+	.col-toolbar .resetButton,
+	.col-toolbar .actionButton,
+	.col-toolbar .helpButton {
+		width: 110px;
+		height: 72px;
+		flex-direction: column;
+		gap: 2px;
+		padding: 4px 6px;
+	}
+
+	.col-toolbar .toolbar-icon {
+		margin-left: 0;
+		margin-top: 0;
+	}
+
+	.col-toolbar .toolbar-label {
+		display: block;
+		font-size: 12px;
+		line-height: 1;
+		text-align: center;
+	}
+}
+
+@media (min-width:1100px) and (max-width:1561px) {
+	.col-result {
+		margin-left: 132px;
+	}
+}
+
 .col-measure {
 	position: relative;
 	width: 900px;
diff --git a/src/index.html b/src/index.html
index ce8bc45..952ef1e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,43 +31,43 @@ <h1>
         <div class="col-toolbar">
             <h2>工具</h2>
             <button type="button" class="resetButton" id="resetPick" title="重置标注">
-                <img src="img\icon\resetPick.png" alt="重置标注" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\resetPick.png" alt="重置标注" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">重置标注</span>
             </button>
             <button type="button" class="actionButton" id="celePick" title="天体选择">
-                <img src="img\icon\celePick.png" alt="天体选择" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\celePick.png" alt="天体选择" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">天体选择</span>
             </button>
             <button type="button" class="actionButton" id="selectStars" title="天体框选">
-                <img src="img\icon\selectStars.png" alt="天体框选" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\selectStars.png" alt="天体框选" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">天体框选</span>
             </button>
             <button type="button" class="actionButton" id="recognizeStars" title="天体识别">
-                <img src="img\icon\starRecognize.png" alt="天体识别" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\starRecognize.png" alt="天体识别" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">天体识别</span>
             </button>
             <button type="button" class="actionButton" id="vaniZen" title="铅垂线标记">
-                <img src="img\icon\vaniZen.png" alt="铅垂线标记" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\vaniZen.png" alt="铅垂线标记" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">铅垂线标记</span>
             </button>
             <!-- <button type="button" class="actionButton" id="horiZen" title="地平线标记">
             <img src="img\icon\horiZen.png" alt="地平线标记" width="48" height="48"
                  style="margin-left:-4px; margin-top:-3px">
             </button> -->
             <button type="button" class="actionButton" id="moonTime" title="标月定时">
-                <img src="img\icon\moonTime.png" alt="标月定时" width="48" height="48"
-                    style="margin-left:-4px; margin-top:-3px">
+                <img src="img\icon\moonTime.png" alt="标月定时" width="48" height="48" class="toolbar-icon">
+                <span class="toolbar-label">标月定时</span>
             </button>
             <a href="https://stellarium-web.org/" target="_blank" style="text-decoration: none;" rel="noopener">
                 <button type="button" class="helpButton" id="stellariumWeb" title="Stellarium在线星图">
-                    <img src="img\icon\stellariumweb.svg" alt="Stellarium" width="46" height="46"
-                        style="margin-left:-4px; margin-top:-3px; margin-bottom: 2px">
+                    <img src="img\icon\stellariumweb.svg" alt="Stellarium" width="46" height="46" class="toolbar-icon">
+                    <span class="toolbar-label">Stellarium</span>
                 </button>
             </a>
             <a href="help.html" target="_blank">
                 <button type="button" class="helpButton" id="howToUse" title="怎么用啊">
-                    <img src="img\icon\emojiThinking.png" alt="怎么用啊" width="48" height="48"
-                        style="margin-left:-4px; margin-top:-3px">
+                    <img src="img\icon\emojiThinking.png" alt="怎么用啊" width="48" height="48" class="toolbar-icon">
+                    <span class="toolbar-label">怎么用啊</span>
                 </button>
             </a>
         </div>
@@ -334,4 +334,4 @@ <h2>关于</h2>
 </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/interface/functions/ImageChange.js b/src/interface/functions/ImageChange.js
index 3d1b370..45f8174 100644
--- a/src/interface/functions/ImageChange.js
+++ b/src/interface/functions/ImageChange.js
@@ -8,8 +8,9 @@ class ImageChange extends DefaultbuttonFunctioner {
         this.clearAllData = clearAllData;
     }
 
-    onClick(e) {
-        let file = e.target.files[0];
+    loadFile(file) {
+        if (!file || !file.type.startsWith('image/')) return;
+
         let reader = new FileReader();
         reader.onload = function (e) {
             let img = new Image();
@@ -43,6 +44,10 @@ class ImageChange extends DefaultbuttonFunctioner {
         this.interactPhoto.canvas.defaultCursor = 'grab';
         this.interactPhoto.canvas.remove(this.interactPhoto.text);
     }
+
+    onClick(e) {
+        this.loadFile(e.target.files[0]);
+    }
 }
 
 export { ImageChange };
diff --git a/src/interface/init.js b/src/interface/init.js
index 0c2428b..5b757f1 100644
--- a/src/interface/init.js
+++ b/src/interface/init.js
@@ -78,6 +78,24 @@ function initializeEvents(eventManager) {
     document
         .getElementById('srcFile')
         .addEventListener('change', (e) => eventManager.imageChange.onClick.call(eventManager.imageChange, e));
+    interactPhoto.container.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        interactPhoto.container.classList.add('drag-over');
+    });
+    interactPhoto.container.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!interactPhoto.container.contains(e.relatedTarget)) {
+            interactPhoto.container.classList.remove('drag-over');
+        }
+    });
+    interactPhoto.container.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        interactPhoto.container.classList.remove('drag-over');
+        eventManager.imageChange.loadFile(e.dataTransfer.files[0]);
+    });
     document
         .getElementById('actionCalcul')
         .addEventListener('click', eventManager.calc.onClick.bind(eventManager.calc));