在RShiny中通过jQuery按行添加自定义类的技术问题

要实现拖拽"Camp"元素后同步更新第一个容器对应位置的样式，我们需要监听拖拽结束事件，实时同步元素位置与样式。以下是修改后的完整代码：

library(shiny)
library(sortable)

ui <- fluidPage(
  actionButton(inputId = "id1", "run"),
  uiOutput("id2")
)

server <- function(input, output, session) {
  observeEvent(input$id1, {
    output$id2 <- renderUI({
      
      tagList(
        tags$style(
          HTML("
              .rank-list-item-Camp {
                background-color: red;
              }
              ")
        ),
        tags$script(
          HTML("
                // 定义同步背景样式的函数
                function syncCampBackground() {
                  // 先清除所有元素的红色背景样式，避免残留
                  $('.rank-list-item').removeClass('rank-list-item-Camp');
                  
                  // 定位第二个容器里的'Camp'元素
                  const campItem = $('.second-bucket .rank-list-item:contains(\"Camp\")');
                  if (campItem.length === 0) return;
                  
                  // 获取'Camp'在所在拖拽列表中的索引
                  const campIndex = campItem.index();
                  
                  // 给'Camp'元素加红色背景
                  campItem.addClass('rank-list-item-Camp');
                  
                  // 给第一个容器对应索引的元素加同样的红色背景
                  $('.first-bucket .rank-list').eq(1).find('.rank-list-item').eq(campIndex).addClass('rank-list-item-Camp');
                }
                
                // 页面加载完成后初始化样式
                $(document).ready(function() {
                  syncCampBackground();
                  
                  // 监听第二个容器的拖拽结束事件，实时同步样式
                  $('.second-bucket .rank-list[aria-disabled=\"false\"]').on('sortable:end', function() {
                    syncCampBackground();
                  });
                });
                     ")
        ),
        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable", "first-bucket"),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = 100,
              options = sortable_options(disabled = TRUE)
            ),
            add_rank_list(
              text = NULL,
              labels = c(50,40,30,15),
              options = sortable_options(disabled = TRUE)
            )
          )
        ),

        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable", "second-bucket"),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = c("Fixed"),
              options = sortable_options(disabled = TRUE)
            ),
            add_rank_list(
              text = NULL,
              labels = c("Camp", rep("No Info",3)),
              options = sortable_options(disabled = FALSE)
            )
          )
        )
        
      )
    })
  })
}
shinyApp(ui, server)

关键修改说明 #

• 容器标识：给两个bucket_list分别添加first-bucket和second-bucket类，方便精准定位元素，避免全局选择器干扰
• 同步函数：syncCampBackground函数负责统一处理样式逻辑，先清除旧样式，再找到当前"Camp"的位置，同步给第一个容器对应索引的元素
• 拖拽监听：监听第二个容器中可拖拽列表的sortable:end事件，每次拖拽完成后自动触发样式同步，保证位置变化后样式实时更新
• 初始化调用：页面加载完成后执行一次同步函数，确保初始状态下样式正确

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