How to make a Draggable Modal Context Pop-Up?

[scoughlin1]

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)

[niketn]

@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();
     });
 });

[aa70627]

@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'