Building upon this initial inquiry, the following code showcases two separate containers, each containing a series of elements provided by the `sortable` R package. Within each container are specific functions called `add_rank_list`, serving different purposes.
The first container consists of elements that are fixed and cannot be moved due to the set `disabled` argument being assigned as `TRUE` for each `add_rank_list`. However, in the second container, elements can be dragged and dropped, except for the first item, where the `disabled` argument is set to `FALSE` instead.
My goal is to highlight any element within the second container labeled as "Camp" with a red background color. Additionally, I aim to apply the same style to the corresponding element in the first container if it shares the same row as the "Camp" element in the second container.
Although successfully adding the desired class to the "Camp" element within the second container, my challenge lies in extending this functionality to the appropriate element in the first container, ensuring synchronization between both despite potential user interactions.
Despite numerous attempts using various techniques, achieving this has proven elusive. Any guidance or support on this matter would be immensely appreciated.
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(paste0("
.custom-sortable .rank-list-item-Camp {
background-color: red
}
"))
),
tags$script(
HTML("
$(document).ready(function() {
$('.custom-sortable .rank-list-item').each(function(index) {
if ($(this).text() === 'Camp') {
targetIndex = index;
}
});
$('.custom-sortable .rank-list-item').eq(targetIndex).addClass('rank-list-item-Camp');
});
")
),
div(
style = "width: 15%; float: left; overflow: hidden;",
bucket_list(
header = NULL,
class = c("default-sortable","custom-sortable" ),
orientation = c("vertical"),
add_rank_list(
text = NULL,
labels = 100,
options = sortable_options(disabled = T)
),
add_rank_list(
text = NULL,
labels = c(50,40,30,15),
options = sortable_options(disabled = T)
)
)
),
div(
style = "width: 15%; float: left; overflow: hidden;",
bucket_list(
header = NULL,
class = c("default-sortable", "custom-sortable"),
orientation = c("vertical"),
add_rank_list(
text = NULL,
labels = c("Fixed"),
options = sortable_options(disabled = T)
),
add_rank_list(
text = NULL,
labels = c("Camp", rep("No Info",3)),
options = sortable_options(disabled = F)
)
)
)
)
})
}
)
}
shinyApp(ui, server)