如何实现支持拖拽重排动态ggplot的Shiny应用

你的代码无法实现预期效果，核心是2个sortable包的用法错误，修正后即可完成动态数量ggplot的拖拽排序功能：

• 错误1：sortable_js()不是用来包裹拖拽容器的函数，它的作用是给页面上已经存在、带固定ID的容器绑定拖拽排序能力，只需要传入目标容器的ID即可，不需要把容器元素作为参数传入函数。
• 错误2：原代码给uiOutput和内部生成的div都设置了plotCollection作为ID，会出现ID重复冲突，导致JS绑定拖拽逻辑失效。

修正后可直接运行的代码 #

library(shiny)
library(tidyverse)
library(sortable)

# ui ---- 
ui <- fluidPage(
  titlePanel("ggplot拖拽排序应用"),
  # 增加控件演示动态可变数量的效果
  sidebarLayout(
    sidebarPanel(
      sliderInput("plot_num", "展示图表数量", min = 3, max = 15, value = 8)
    ),
    mainPanel(
      uiOutput("plotContainer")
    )
  )
)

# server ---- 
server <- function(input, output) {
  # 响应式数据源，适配动态图表数量
  plot_data <- reactive({
    mtcars[1:input$plot_num, ]
  })
  
  # 渲染图表容器并绑定拖拽能力
  output$plotContainer <- renderUI({
    n <- nrow(plot_data())
    # 批量生成图表输出占位
    plot_list <- lapply(1:n, function(i) {
      div(
        style = "padding: 5px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 8px; background: white;",
        plotOutput(paste0("plot_", i), height = 120)
      )
    })
    
    tagList(
      # 定义拖拽容器，设置独立固定ID
      div(id = "sortable_plot_area", style = "padding: 10px; background: #f8f9fa; border-radius: 6px;",
          plot_list
      ),
      # 给上述容器绑定拖拽排序能力
      sortable_js("sortable_plot_area")
    )
  })
  
  # 批量渲染每个ggplot图表
  observe({
    n <- nrow(plot_data())
    for(idx in 1:n) {
      local({
        local_id <- idx
        current_data <- plot_data() %>% slice(local_id)
        output[[paste0("plot_", local_id)]] <- renderPlot({
          ggplot(current_data, aes(x = disp, y = wt)) +
            geom_point(size = 3, color = "#2c3e50") +
            labs(title = row.names(current_data)) +
            theme_minimal()
        })
      })
    }
  })
}

shinyApp(ui = ui, server = server)

关键实现说明 #

• 拖拽绑定逻辑：先创建ID为sortable_plot_area的普通div，把所有图表输出元素作为该div的子元素，再调用sortable_js("sortable_plot_area")开启拖拽能力，容器下的所有直接子元素会自动支持拖拽重排。
• 动态数量适配：所有和图表数量相关的逻辑都绑定响应式数据源，调整图表数量时会自动增删图表元素，拖拽功能不需要额外修改。
• 扩展能力：如果需要获取拖拽后的排序顺序，可以在sortable_js中增加回调配置，例如sortable_js("sortable_plot_area", options = sortable_options(onSort = sortable_capture_input("sorted_order")))，之后即可通过input$sorted_order拿到最新的元素排序结果。

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