Dashboards & Visualizations

How to make a Draggable Modal Context Pop-Up?

scoughlin1
Path Finder

I followed this example https://answers.splunk.com/answers/699512/drilldown-submenu.html

I would also like to make the modal box draggable. I tried adding :

$(document).ready(function() {
    $("#modalTableDrilldown").draggable().resizable();
});

However, I cannot drag the modal pop-up, or resize it.

Any suggestions? (@niketnilay)

Labels (1)
0 Karma

niketn
Legend

@scoughlin1 I was able to add draggable(), but resizable() did not play well. So if draggable alone will suffice the need then please try the following two changes to my previous answer.

1) Add reference to jQueryUI as draggable() event is available with jQueryUI not just jQuery library. You can use node to get jQuery reference and then use the same in your code. For simplicity I used following CDN URL for latest jQuery component

 'https://code.jquery.com/ui/1.12.1/jquery-ui.js',

Or following shared contribution available within Splunk for jQuery UI 1.10.4

 

 

'jquery.ui.draggable'

 

2) The Table Click Event Handler which sets the CSS for Modal view to display it, should also be changed to add draggable()

     $("#modalTableDrilldown").css({

 

'jquery.ui.draggable'

 

top: top, left: left }).draggable(); 

Following is the updated Javascript table_with_modal_drilldown.js. Please try and confirm whether you are able to drag the modal popup or not.

 

 

require([
     'jquery',
     'underscore',
     'splunkjs/mvc',
     'jquery.ui.draggable',
     'splunkjs/mvc/simplexml/ready!'
 ], function ($, _, mvc) {
     defaultTokenModel = mvc.Components.get("default");
     console.log("Inside Modal JS");
     $("#modalTableDrilldown").draggable(console.log("Added Dragging")).resizable(console.log("Added Dragging"));
     // All anchor tags close the Modal Pop Up
     $(document).on("click","#modalTableDrilldown a", function () {
         defaultTokenModel.set("tokHideShow", "hide fade");
     });
     // On click of table cell get Table Width and adjust Modal PopUp size
     $(document).on("click","#tableWithModalPopuUp table tbody tr td", function(e){
         // viewWidth stores Table Width
         var viewWidth=e.view.innerWidth;
         // Show modal pop-up a bit below the current cell.
         var top = e.pageY+10;
         var left = e.pageX;
         //Adjust position when clicking extreme left side of the table. Modal window has width 400.
         if(left<400){
             left=left+400;
         }
         //Adjust position when clicking extreme right side of the table. Modal window has width 400.
         if(left+200>viewWidth){
             left=viewWidth-200;
         }
         $("#modalTableDrilldown").css({
             top: top,
             left: left
         }).draggable();
     });
 });

 

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

aa70627
Communicator

@niketn , how do you determine which widget is available as part of the shared contribution? 

For example, including this seems to work fine

'jquery.ui.draggable' 

but including other widgets seems to throw an error

'jquery.ui.slider'

 

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...