Implement drag functionality to popup element

service.js

@@ -650,10 +650,13 @@ class BesPopupEl extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({ mode: 'open' })
-  }
+    // Variables to store the initial positions
+    this.initialMouseX = 0
+    this.initialMouseY = 0
+    this.currentMouseX = 0
+    this.currentMouseY = 0
 
-  connectedCallback() {
-    this.render()
+    this.isMouseDownRegistered = false
   }
 
   render() {
@@ -736,6 +739,22 @@ class BesPopupEl extends HTMLElement {
     this.style.position = 'fixed'
     this.style.left = `${x}px`
     this.style.top = `${y}px`
+
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+    const popupWidth = this.offsetWidth
+    const popupHeight = this.offsetHeight
+    const maxPositionX = viewportWidth - popupWidth
+    const maxPositionY = viewportHeight - popupHeight
+    const positionX = this.offsetLeft
+    const positionY = this.offsetTop
+    if (positionX > maxPositionX) {
+      this.style.left = maxPositionX + 'px'
+    }
+    if (positionY > maxPositionY) {
+      this.style.top = maxPositionY + 'px'
+    }
+
     this.classList.add('show')
   }
 
@@ -769,6 +788,61 @@ class BesPopupEl extends HTMLElement {
     })
     replacementDiv.appendChild(replacementBtn)
   }
+
+  dragMouseDown(e) {
+    e = e || window.event
+    e.preventDefault()
+    this.initialMouseX = e.clientX
+    this.initialMouseY = e.clientY
+    document.onmousemove = this.elementDrag.bind(this)
+    document.onmouseup = this.closeDragElement.bind(this)
+  }
+
+  // Function to handle the mousemove event
+  elementDrag(e) {
+    e = e
+    e.preventDefault()
+
+    let diffX = this.initialMouseX - e.clientX
+    let diffY = this.initialMouseY - e.clientY
+    this.initialMouseX = e.clientX
+    this.initialMouseY = e.clientY
+
+    let newTop = this.offsetTop - diffY
+    let newLeft = this.offsetLeft - diffX
+    const popupWidth = this.offsetWidth
+    const popupHeight = this.offsetHeight
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    // Adjust the new position if it would place the popup outside the window
+    if (newTop < 0) {
+      newTop = 0
+    } else if (newTop + popupHeight > viewportHeight) {
+      newTop = viewportHeight - popupHeight
+    }
+    if (newLeft < 0) {
+      newLeft = 0
+    } else if (newLeft + popupWidth > viewportWidth) {
+      newLeft = viewportWidth - popupWidth
+    }
+
+    this.style.top = newTop + 'px'
+    this.style.left = newLeft + 'px'
+  }
+
+  closeDragElement() {
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+
+  connectedCallback() {
+    this.render()
+    if (!this.isMouseDownRegistered) {
+      this.onmousedown = this.dragMouseDown.bind(this)
+      this.isMouseDownRegistered = true
+    }
+  }
 }
 
 window.onload = () => {