如何将shinyjqui可拖拽绘图的高度值同步更新到sliderInput

问题根源 #

你遇到的回弹问题是因为当前逻辑是单向绑定：只有sliderInput控制绘图高度，拖拽调整的是前端DOM元素的临时高度，没有同步回input$plotsize，绘图触发重绘时就会用input$plotsize存储的旧值渲染，导致高度回弹。

修正后完整代码 #

library(shiny)
library(shinyjqui)
library(ggplot2)

ui <- fluidPage(
  tags$p("Height value from draggable plot"),
  verbatimTextOutput('size_obj'),
  sliderInput("plotsize", label = "Plot height", value = 300, min = 200, max = 500),
  tabsetPanel(
    id = 'tabs',
    tabPanel(
      title = 'ggplot',
      jqui_resizable(plotOutput('gg'))
    )
  )
)

server <- function(input, output, session) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  }, 
  height=exprToFunction(as.numeric(input$plotsize))
  )
  
  # 新增：监听拖拽产生的尺寸变化，同步更新sliderInput
  observeEvent(input$gg_size, {
    updateSliderInput(session, "plotsize", value = input$gg_size$height)
  })
  
  output$size_obj <- renderPrint({
    name <- paste0('gg', '_size')
    cat(input[[name]]$height)
  })
  
}
shinyApp(ui, server)

关键修改说明 #

• 新增了observeEvent监听input$gg_size的变化，每次拖拽结束触发该值更新时，自动调用updateSliderInput将最新高度同步到滑块组件
• 现在双向绑定生效：拖动滑块可调整绘图高度，拖拽调整绘图高度也会自动同步滑块的数值，不会再出现回弹问题

内容的提问来源于stack exchange，提问作者writer_typer