Dragging Feature

src/DebugBar/Resources/debugbar.css

@@ -1,4 +1,7 @@
 /* Hide debugbar when printing a page */
+div.phpdebugbar {
+  display: none;
+}
 @media print {
   div.phpdebugbar {
     display: none;

src/DebugBar/Resources/debugbar.js

@@ -1293,4 +1293,88 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
     });
 
+    // ============= Handling Dragging Behavior ============
+    var storedPosX = localStorage.getItem('phpdebugbarPositionX') || 0;
+    var screenWidth = $(window).width();
+
+    $(document).on('click', '.phpdebugbar', function () {
+        let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed');
+        if (!isClosed) {
+            // Save current position to localStorage when closing the debugbar
+            storedPosX = localStorage.getItem('phpdebugbarPositionX');
+            $('.phpdebugbar').css('left', '0px');
+        } else {
+            // Restore saved position from localStorage when opening the debugbar
+            localStorage.setItem('phpdebugbarPositionX', storedPosX);
+            $('.phpdebugbar').css('left', storedPosX + 'px');
+        }
+    });
+
+    $(document).ready(function () {
+        // Check local storage for saved position
+        var savedPosX = localStorage.getItem('phpdebugbarPositionX');
+        var phpdebugbarIsOpen = localStorage.getItem('phpdebugbar-open');
+
+        if (savedPosX !== null && phpdebugbarIsOpen == 0 && screenWidth > savedPosX) {
+            $('.phpdebugbar').css('left', savedPosX + 'px');
+        }
+
+        // Make the phpdebugbar visible after setting the position
+        $('div.phpdebugbar').css('display', 'block');
+
+        function startDragging(e) {
+            // Prevent text selection while dragging
+            e.preventDefault();
+
+            // Track initial mouse position and element position
+            var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
+            var initialPosX = $('.phpdebugbar').position().left;
+
+            // Get the width of the element and the screen
+            var elementWidth = $('.phpdebugbar').outerWidth();
+
+            function doDrag(e) {
+                // Calculate the change in mouse position
+                var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
+                var deltaX = clientX - initialMouseX;
+
+                // Update the position of the element
+                var newPosX = initialPosX + deltaX;
+
+                // Ensure the new position is within screen boundaries
+                if (newPosX < 0) {
+                    newPosX = 0;
+                } else if (newPosX + elementWidth > screenWidth) {
+                    newPosX = screenWidth - elementWidth;
+                }
+
+                let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed');
+                if (!isClosed) {
+                    $('.phpdebugbar').css('left', '0px');
+                    return;
+                }
+
+                $('.phpdebugbar').css('left', newPosX + 'px');
+            }
+
+            function stopDragging() {
+                // Unbind the move and up/end events
+                $(document).off('mousemove.drag touchmove.drag');
+                $(document).off('mouseup.drag touchend.drag');
+
+                // Save the new position to local storage
+                var finalPosX = $('.phpdebugbar').position().left;
+                localStorage.setItem('phpdebugbarPositionX', finalPosX);
+            }
+
+            // Bind the move and up/end events
+            $(document).on('mousemove.drag touchmove.drag', doDrag);
+            $(document).on('mouseup.drag touchend.drag', stopDragging);
+        }
+
+        // Bind the down/start events
+        $(document).on('mousedown touchstart', '.phpdebugbar', startDragging);
+    });
+    // ============= End Handling Dragging Behavior ============
+
 })(PhpDebugBar.$);