When running the code posted at the bottom, the user can drag child elements down from the "Menu" parent node down to another node underneath for purpose of receiving the dragged items (">> Drag here <<") and thus build a custom hierarchy tree.
I'm trying to shade, or otherwise differentiate (for example, by drawing a box around), the "Drag here" node that expands/contracts as that custom hierarchy tree changes. How can this be done? Shading would be my preference but I am open to any ideas!
As illustrated here:
Code:
library(jsTreeR)
library(shiny)
nodes <- list(
list(
text = "Menu",
state = list(opened = TRUE),
children = list(
list(text = "Dog",type = "moveable",state = list(disabled = TRUE)),
list(text = "Cat",type = "moveable",state = list(disabled = TRUE))
)
),
list(text = ">> Drag here <<",type = "target",state = list(opened = TRUE))
)
dnd <- list(
always_copy = TRUE,
inside_pos = "last",
is_draggable = JS(
"function(node) {",
" return node[0].type === 'moveable';",
"}"
)
)
mytree <-
jstree(
nodes, dragAndDrop = TRUE, dnd = dnd,
types = list(moveable = list(), target = list())
)
ui <- fluidPage(fluidRow(jstreeOutput("mytree")))
server <- function(input, output, session){
output[["mytree"]] <- renderJstree(mytree)
}
shinyApp(ui, server)