Dynamic popup in RShiny interface with the ability to be moved around

I am currently working on a dashboard project and I am looking to implement a dynamic popup feature that can be moved around. I have been able to create a pop-up, but it remains static. I would like the flexibility for users to drag and position the popup wherever they prefer.

Here is an example of my current implementation:

library(shiny)
library(shinyBS)

shinyApp(

  ui =
    fluidPage(
      sidebarLayout(
        box(actionButton("tabBut", "View Table")),
        mainPanel(
          bsModal("modalExample", "Data Table", "tabBut", size = "large",
                  dataTableOutput("distTable"))))),

  server =
    function(input, output, session) {
      output$distTable <- renderDataTable({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = 30 + 1)
        tab <- hist(x, breaks = bins, plot = FALSE)
        tab$breaks <- sapply(seq(length(tab$breaks) - 1), function(i) {
          paste0(signif(tab$breaks[i], 3), "-", signif(tab$breaks[i+1],    3))})
        tab <- as.data.frame(do.call(cbind, tab))
        colnames(tab) <- c("Bins", "Counts", "Density")
        return(tab[, 1:3])}, 
        options = list(pageLength=10))}
)

View result here

I am looking for ways to enable users to move this popup window. If you have suggestions for different options or if you know of alternative methods besides using Shiny BS to create movable windows, please let me know!

Thank you in advance and apologies for any language barriers!

Answer №1

If you want to achieve this manually, here are the steps:

1) Insert script

2) Include draggable functionality

3) Customize CSS

For example:

 ui =
    fluidPage(
      tags$head(HTML('<script src="//code.jquery.com/jquery-1.10.2.js"></script>
                    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>')),
        tags$script(HTML('  $(window).load(function(){
                        $("#modalExample").draggable({
                        handle: ".modal-header"
                                   });
                                   });')),
            tags$style(HTML("
            .modal-backdrop.in {
                opacity: 0;
            }    
                ")),
      sidebarLayout(
        box(actionButton("tabBut", "View Table")),
        mainPanel(

          bsModal("modalExample", "Data Table", "tabBut", size = "large",
                  dataTableOutput("distTable")))))

Answer №2

To implement draggable elements, consider using the shinyjqui package. You can refer to this example script:

https://github.com/rstudio/shiny/issues/1698

Make the following adjustment:

jqui_draggable(selector = '.modal-content')

to:

jqui_draggable(ui = '.modal-content')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please provide values in the input box, with each value separated by

I attempted the following code: success: function (result) { for (var i = 0; i < result.d.length; i++) { var emails = new Array(); emails = result.d[i].Emailid; alert(emails); $("#EmailCC").val(emails); ...

Emphasize SELENIDE rows

My goal is to achieve the following: @Test public void tableTest() { getDriver().get(BASE_URL + "tabulka.php"); List<WebElement> rows = getDriver().findElements(By.xpath("//table//tbody//tr")); for (We ...

Why isn't my ng-click function functioning properly on Google Maps in AngularJS?

i have two stores in my database and am attempting to display them on a Google map with markers. I have an ng-click function inside the info window to pass the store id, but it seems like ng-click is not working. Is there any alternative method to pass t ...

Using Javascript, when the command key is pressed, open the link in a new window

Currently, I am working on a Javascript function that opens links in a new tab only when the "command" key is pressed on an Apple computer. Here is what I have so far: $(document).on('click','a[data-id]',function(e){ if(e.ctrlKey|| ...

Guide to generating Cumulative Distribution Function charts in R

Currently, I am facing an issue when attempting to create a CDF plot using the ecdf() function with the provided code: > x<-ecdf(data$V6) > summary(x) Empirical CDF: 2402 unique values with summary Min. 1st Qu. Median Mean 3rd Qu ...

Production Server experiencing issues with sending Large Lists via Http Post

I'm experiencing an issue where the server is unable to read values from a large list when sent using Post. Oddly enough, this works on the homologation server but not on the production server. Http post AngularJs $http({ url: $rootScope.raiz_ws ...

Reverse the text alteration when the user leaves the field without confirming

Upon exiting a text box, I aim to display a confirmation dialogue inquiring whether the user is certain about making a change. If they select no, I would prefer for the text box to revert back to its original state. Is there an uncomplicated method to ach ...

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

Using jQuery to combine the values of text inputs and checkboxes into a single array or string

I need to combine three different types of items into a single comma-separated string or array, which I plan to use later in a URL. Is there a way to merge these three types of data together into one string or array? An existing POST string User input f ...

Accessing form data from Ajax/Jquery in php using $_POST variables

Thank you in advance for any assistance on this matter. I'm currently attempting to utilize Ajax to call a script and simultaneously post form data. While everything seems to be working correctly, the $POST data appears to come back blank when trying ...

Unable to access parameters from Pug template when using onclick event

I am facing an issue with my pug template test.pug. It contains a button that, when clicked, should call a function using parameters passed to the template from the rendering endpoint. Below is the structure of my template: doctype html html head tit ...

Just delving into React for the first time and encountering undefined values in PropTypes

I am completely new to React and attempting to create a basic weather application in order to understand how components interact with each other. I have a forecast.json file that contains information such as temperature, date, humidity, wind speed, wind di ...

Ways to send information to browser javascript from Spring MVC controller

Looking for the most efficient method to transfer data from Spring MVC to JavaScript. Let's say there is an array in JavaScript: var myArray = new Array(); And in the Java backend, there is another array: int[] myArray = new int[100]; What would ...

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

Resource file for locating the mappings

As a beginner in sourcemapping, I have been tasked with saving the sourcemap in an external file. However, up to this point, I have only been able to concatenate the sourcemap to the minified .js file. What changes should I make to my approach? Am I miss ...

How can I prevent Chrome from constantly prompting for permission to access the camera?

I have been working on some HTML/JavaScript/WebRTC projects that involve using the webcam. Despite hosting the files from my local web server (127.0.0.1), Chrome always prompts me for permission to access the camera each time I reload the page. Is there a ...

Obtaining the data from the React material-UI Autocomplete box

I have been exploring the React Material-UI documentation (https://material-ui.com/components/autocomplete/) and came across a query. Within the demo code snippet, I noticed the following: <Autocomplete options={top100Films} getOptionL ...

Updating a React event as it changes with each onChange event

Let's address a disclaimer before diving into the issue - for a quick look, visit this pen and type something there. The Scenario This is the JSX code snippet used in my render method: <input value={this.state.value} onChange={this.handleCh ...

Substitute empty spaces and organize the text layout

I'm struggling to figure out how to substitute the whiteSpace in an aggregate request using MongoDB and also how to remove a specific part of a string (most likely requiring regex). Here's an example of my document: { "_id": "57dfa5c9xxd76b ...