feat: init drag and drop requests on team collections

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -2,6 +2,12 @@
   <div class="flex flex-col">
     <div
       class="flex items-stretch group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -196,6 +202,7 @@ export default defineComponent({
   data() {
     return {
       showChildren: false,
+      dragging: false,
       selectedFolder: {},
       confirmRemove: false,
       prevCursor: "",
@@ -251,6 +258,12 @@ export default defineComponent({
     expandCollection(collectionID) {
       this.$emit("expand-collection", collectionID)
     },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const requestIndex = dataTransfer.getData("requestIndex")
+      console.log(requestIndex, this.collection.id)
+      // moveRESTTeamRequest(`${this.collectionIndex}`, requestIndex)
+    },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
         collectionIndex,

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
       class="flex items-stretch group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -178,6 +184,7 @@ export default defineComponent({
   data() {
     return {
       showChildren: false,
+      dragging: false,
       confirmRemove: false,
       prevCursor: "",
       cursor: "",
@@ -238,6 +245,12 @@ export default defineComponent({
     expandCollection(collectionID) {
       this.$emit("expand-collection", collectionID)
     },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const requestIndex = dataTransfer.getData("requestIndex")
+      console.log(requestIndex, this.folder.id)
+      // moveRESTTeamRequest(this.folder.id, requestIndex)
+    },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
         collectionIndex,

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
       class="flex items-stretch group"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -128,6 +133,7 @@ export default defineComponent({
   },
   data() {
     return {
+      dragging: false,
       requestMethodLabels: {
         get: "text-green-500",
         post: "text-yellow-500",
@@ -170,6 +176,11 @@ export default defineComponent({
           requestID: this.requestIndex as string,
         })
     },
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("requestIndex", this.requestIndex)
+      console.log(dataTransfer)
+    },
     removeRequest() {
       this.$emit("remove-request", {
         collectionIndex: this.$props.collectionIndex,