add draggable abspos demo

Author: Sebi Nemeth

src/demo/App.vue

@@ -47,6 +47,11 @@
       <h3>Attribute</h3>
       <img class="image" src="https://source.unsplash.com/random/500x500" :alt="t('LTPlugin.Attrs.ImageAlt')"
         :title="t('LTPlugin.Attrs.ImageTitle')">
+
+      <div id="draggable" draggable @mousedown="dragStart" @mousemove="dragMove" @mouseup="dragEnd" ref="draggable" :title="t('LTPlugin.PositionAbsolute')">
+        <h3>Absolute position</h3>
+        {{ t('LTPlugin.Draggable') }}
+      </div>
     </div>
   </div>
 </template>
@@ -66,6 +71,26 @@ const showMeta = computed(() => {
   return null
 })
 
+const dragPos = ref<{ x: number, y: number } | null>(null)
+const draggable = ref<HTMLDivElement>()
+
+function dragStart(e: MouseEvent) {
+  dragPos.value = {
+    x: e.offsetX,
+    y: e.offsetY,
+  }
+}
+
+function dragMove(e: MouseEvent) {
+  if (!dragPos.value) return
+  draggable.value!.style.top = e.pageY - dragPos.value.y + 'px'
+  draggable.value!.style.left = e.pageX - dragPos.value.x + 'px'
+}
+
+function dragEnd() {
+  dragPos.value = null
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -120,4 +145,32 @@ const showMeta = computed(() => {
   width: 80%;
   border-radius: 8px;
 }
+
+#draggable {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  background: #eeeeeee2;
+  width: 200px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: grab;
+  flex-direction: column;
+
+  h3 {
+    margin-top: 0;
+  }
+
+  &:hover {
+    outline: solid 2px #eeeeee;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
 </style>

src/demo/lang/en.json

@@ -11,6 +11,8 @@
         "PartOne": "Part one",
         "PartTwo": "Part two",
         "ListItemN": "Item {0}",
-        "MultipleTitle": "Multiple strings inside one tag"
+        "MultipleTitle": "Multiple strings inside one tag",
+        "Draggable": "Drag me around to cover elements",
+        "PositionAbsolute": "Position is absolute"
     }
 }

src/demo/lang/hu.json

@@ -11,6 +11,8 @@
         "PartOne": "Első rész",
         "PartTwo": "Második rész",
         "ListItemN": "Elem {0}",
-        "MultipleTitle": "Több string egy tagen belül"
+        "MultipleTitle": "Több string egy tagen belül",
+        "Draggable": "Mozgass egy elem fölé, hogy eltakard azt",
+        "PositionAbsolute": "'absolute' pozíció"
     }
 }

src/demo/main.ts

@@ -13,7 +13,7 @@ app.use(LiveTranslatorPlugin, {
   },
   persist: true,
   root: document.getElementById('app'),
-  refreshRate: 200,
+  refreshRate: 50,
 })
 
 app.mount('#app')

src/demo/style.css

@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 h1 {