Make QR code and price draggable

lnbits/extensions/copilot/templates/copilot/compose.html

@@ -15,7 +15,8 @@
 
   <div
     v-if="copilot.lnurl_toggle == 1"
-    class="rounded-borders column fixed-right"
+    id="draggableqr"
+    class="rounded-borders"
     style="
       width: 250px;
       background-color: white;
@@ -36,8 +37,9 @@
   </div>
 
   <h2
+    id="draggableprice"
     v-if="copilot.show_price != 0"
-    class="text-bold fixed-bottom-left"
+    class="text-bold"
     style="
       margin: 60px 60px;
       font-size: 110px;
@@ -47,6 +49,7 @@
   >
     {% raw %}{{ price }}{% endraw %}
   </h2>
+
   <p
     v-if="copilot.show_ack != 0"
     class="fixed-top"
@@ -73,7 +76,19 @@
   .q-page {
     padding: 0px;
   }
+  #draggableqr {
+    width: 250px;
+    height: 300px;
+    cursor: grab;
+  }
+  #draggableprice {
+    width: 550px;
+    height: 60px;
+    cursor: grab;
+  }
 </style>
+<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
 <script>
   Vue.component(VueQrcode.name, VueQrcode)
 
@@ -167,7 +182,11 @@
       this.initCamera()
     },
     created: function () {
-      self = this
+      $(function () {
+        $('#draggableqr').draggable()
+        $('#draggableprice').draggable()
+      }),
+        (self = this)
       self.copilot = JSON.parse(localStorage.getItem('copilot'))
       LNbits.api
         .request(