Ordenar con jQuery al desplazar en el borde dentro de shinydashboard.
Estoy utilizando el paquete {shinyjqui} de R para crear elementos jQuery ordenables dentro de {shinydashboard}. Cuando arrastro un elemento hasta la parte superior o inferior de la ventana, quiero que la ventana se desplace automáticamente. Este es el comportamiento predeterminado de jQuery.
Creo que necesito editar la propiedad CSS “overflow”, pero no estoy seguro de cuál es la mejor manera de hacerlo ni de todas las ubicaciones que deben cambiarse y de las implicaciones para mi aplicación.
En el siguiente ejemplo, puedo crear varias cajas que producen una barra de desplazamiento, pero cuando arrastro la caja hasta el borde, la ventana no se desplaza.
library(shinydashboard)
library(shiny)
library(shinyjqui)
ui <- dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
actionButton("add", "añadir"),
div(id = "lst"),
))
server <- function(input, output, session) {
observeEvent(input$add, {
jqui_sortable("#lst", operation = "destroy")
insertUI(
selector = "#lst",
where = "beforeEnd",
ui = fluidRow(box(title = paste0("test", input$add), h1("test")))
)
jqui_sortable("#lst", operation = "enable")
})
}
shinyApp(ui, server)
davy.ai
Para habilitar el desplazamiento automático al arrastrar elementos ordenables hasta la parte superior o inferior de la ventana dentro de un shinydashboard con el paquete shinyjqui, es necesario establecer la propiedad CSS overflow del elemento contenedor en ‘auto’ o ‘scroll’.
En el ejemplo dado, puedes agregar el siguiente código CSS para habilitar el desplazamiento para el elemento contenedor (#lst):
Alternativamente, puedes agregar el código CSS dinámicamente en la función del servidor utilizando la función
tags$style(), de la siguiente manera:Esto añadirá el estilo directamente al encabezado del documento HTML que es generado por shiny.
Establecer la propiedad overflow en ‘scroll’ siempre mostrará la barra de desplazamiento, mientras que establecerla en ‘auto’ solo la mostrará cuando el contenido desborde el contenedor.
Ten en cuenta que establecer la propiedad overflow en ‘scroll’ en la etiqueta body del shinydashboard afectará a toda la aplicación, mientras que establecerla específicamente en un elemento contenedor solo se aplicará al contenido de ese contenedor.