From 2f1996cc053abf844827e5e6f3c8982af2c0fb30 Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Tue, 24 Oct 2023 18:21:46 +0200
Subject: [PATCH] MVC/ Form dialogs - make dialogs draggable. closes
 https://github.com/opnsense/core/issues/6947

It's a bit of an experiment, but being able to drag the modal is practical sometimes. This commit attaches mouse events to drag on the header of the model so we can move the modal offset, when reopening the same it resets back to its starting position.
---
 .../www/js/opnsense_bootgrid_plugin.js        | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/opnsense/www/js/opnsense_bootgrid_plugin.js b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
index 441fa1702..5bd8ae23a 100644
--- a/src/opnsense/www/js/opnsense_bootgrid_plugin.js
+++ b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
@@ -268,12 +268,38 @@ $.fn.UIBootgrid = function (params) {
             $('.selectpicker').selectpicker('refresh');
             // clear validation errors (if any)
             clearFormValidation('frm_' + editDlg);
-            if ($('#'+editDlg).hasClass('modal')) {
-                // show dialog
-                $('#'+editDlg).modal({backdrop: 'static', keyboard: false});
+            let target = $('#'+editDlg);
+            if (target.hasClass('modal')) {
+                // show dialog and hook draggable event on first show
+                target.modal({backdrop: 'static', keyboard: false});
+                if (!target.hasClass('modal_draggable')) {
+                    target.addClass('modal_draggable');
+                    let height=0, width=0, ypos=0, xpos=0;
+                    let this_header = target.find('.modal-header');
+                    this_header.css("cursor","move");
+                    this_header.on('mousedown', function(e){
+                        this_header.addClass("drag");
+                        height = target.outerHeight();
+                        width = target.outerWidth();
+                        ypos = target.offset().top + height - e.pageY;
+                        xpos = target.offset().left + width - e.pageX;
+                    });
+                    $(document.body).on('mousemove', function(e){
+                        let itop = e.pageY + ypos - height;
+                        let ileft = e.pageX + xpos - width;
+                        if (this_header.hasClass("drag")){
+                            target.offset({top: itop, left: ileft});
+                        }
+                    }).on('mouseup mouseleave', function(e){
+                        this_header.removeClass("drag");
+                    });
+                } else {
+                    // reset to starting position (remove drag distance)
+                    target.css('top', '').css('left', '');
+                }
             } else {
                 // when edit dialog isn't a modal, fire click event
-                $('#'+editDlg).click();
+                target.click();
             }
 
             if (this_grid.onBeforeRenderDialog) {