grab picture when moving it around

src/pages/profile_page.html

@@ -10,6 +10,7 @@
 <link rel="stylesheet" href="static/error/error.css" />
 <link rel="stylesheet" href="static/profile_page.css" />
 <link rel="stylesheet" href="static/progress_bar.css" />
+<link rel="stylesheet" href="static/cursor.css" />
 
 <div id="popup_background" class="blocked hidden"></div>
 
@@ -189,6 +190,8 @@
     });
 </script>
 
+<script src="/static/javascript/cursor.js" type="text/javascript"></script>
+
 <script type="text/javascript">
     var currentPreviewURL = null,
         image = null,
@@ -297,6 +300,7 @@
         x_start = currentX;
         y_start = currentY;
         mouseClicked = true;
+        set_cursor_state(CURSOR_GRABBING);
     });
 
     resize_photo_box.addEventListener("mouseup", () => {
@@ -308,11 +312,11 @@
 
     document.body.addEventListener("mouseup", () => {
         mouseClicked = false;
+        set_cursor_state(CURSOR_NORMAL);
     });
 </script>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
-<script src="/static/javascript/cursor.js" type="text/javascript"></script>
 <script
     src="/static/javascript/password_strength.js"
     type="text/javascript"

static/profile_page.css

@@ -189,6 +189,17 @@
     z-index: 4;
 }
 
+#resize_photo_box:hover {
+    background-color: rgba(0, 0, 0, 0);
+    width: 350px;
+    aspect-ratio: 1 / 1;
+
+    border-style: dashed;
+    border-color: black;
+    border-width: 5px;
+    z-index: 4;
+}
+
 /*
 
 #resize_photo_box:hover {