fixing my signature and initials drag issues

app/javascript/template_builder/area.vue

@@ -96,6 +96,7 @@
         <IconX width="14" />
       </button>
     </div>
+    <!-- adding redacting box -->
     <div
       v-if="field.type === 'redact'"
       class="opacity-100 flex items-center justify-center h-full w-full bg-redact"
@@ -129,9 +130,9 @@
         @input="makeMyText"
       />
     </div>
-    <!-- adding my_signature for prefills -->
+    <!-- adding my_signature and my_initials for prefills -->
     <div
-      v-else-if="['my_signature'].includes(field.type)"
+      v-else-if="['my_signature', 'my_initials'].includes(field.type)"
       class="flex items-center justify-center h-full w-full"
       style="background-color: white;"
     >
@@ -140,37 +141,20 @@
         :id="field.uuid"
         :src="mySignatureUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
-        @click="handleMySignatureClick"
-      >
-      <img
-        v-else
-        :id="field.uuid"
-        class="d-flex justify-center w-full h-full"
-        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
-        @click="handleMySignatureClick"
-      >
-    </div>
-    <!-- adding my_initials for prefills -->
-    <div
-      v-else-if="['my_initials'].includes(field.type)"
-      class="flex items-center justify-center h-full w-full"
-      style="background-color: white;"
+        style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
       >
       <img
-        v-if="field.type === 'my_initials' && myInitialsUrl"
+        v-else-if="field.type === 'my_initials' && myInitialsUrl"
         :id="field.uuid"
         :src="myInitialsUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
-        @click="handleMyInitialClick"
+        style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
       >
       <img
         v-else
         :id="field.uuid"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
-        @click="handleMyInitialClick"
+        style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
       >
     </div>
     <div
@@ -215,10 +199,11 @@
     />
   </div>
   <div
-    v-if="showMySignature"
     @pointerdown.stop
-    @mousedown.stop="startDrag"
     @touchstart="startTouchDrag"
+  >
+    <div
+      v-if="showMySignature"
     >
       <MySignature
         :key="field.uuid"
@@ -236,9 +221,6 @@
     </div>
     <div
       v-if="showMyInitials"
-    @pointerdown.stop
-    @mousedown.stop="startDrag"
-    @touchstart="startTouchDrag"
     >
       <MyInitials
         :key="field.uuid"
@@ -254,6 +236,7 @@
         @start="$refs.areas.scrollIntoField(field)"
       />
     </div>
+  </div>
 </template>
 
 <script>
@@ -609,6 +592,11 @@ export default {
       }
     },
     startDrag (e) {
+      if (this.field.type === 'my_signature') {
+        this.handleMySignatureClick()
+      } else if (this.field.type === 'my_initials') {
+        this.handleMyInitialClick()
+      }
       this.selectedAreaRef.value = this.area
 
       if (!this.editable) {