CW ImageMapBlock: Implement dragging functionality, closes #1136

Closes #1136

Merge request studip/studip!1088

resources/assets/stylesheets/scss/courseware.scss

@@ -110,6 +110,8 @@ $media-buttons: (
     next: arr_eol-right
 );
 
+$cw-wrapper-gap: 0.5em;
+
 /* * * * * * * *
 c o n t e n t s
 * * * * * * * * */
@@ -954,12 +956,13 @@ form.cw-container-dialog-edit-form {
     width: 100%;
     .cw-block-content {
         overflow: auto;
+        position: relative;
     }
 }
 .cw-content-wrapper-active {
     border: solid thin $content-color-40;
     .cw-block-content {
-        padding: 0.5em;
+        padding: $cw-wrapper-gap;
     }
 }
 .cw-container-wrapper-discuss {
@@ -1027,6 +1030,27 @@ form.cw-container-dialog-edit-form {
     margin-left: 10px;
 }
 
+.cw-draggable-shapes-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    margin: $cw-wrapper-gap;
+
+    .cw-draggable-area {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        &:hover {
+            cursor: grab;
+        }
+    }
+}
+
 @media only screen and (max-width: 1820px) {
     .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss {
         max-width: 1095px;
@@ -1727,6 +1751,7 @@ $icons: (
         &.cw-tab-active {
             display: block;
             height: unset;
+            padding: 4px 8px;
         }
 
         form.default {
@@ -4069,6 +4094,12 @@ i m a g e  m a p  b l o c k
     .cw-image-map-original-img {
       display: none;
     }
+
+    form.default {
+        label.cw-block-image-map-dimensions > input[type=number] {
+            display: inline-block;
+        }
+    }
 }
 
 /* * * * * * * * * * * * * * * * *