jqui_sortable for htmlOutput

[renedlog]

Hi I've encountered a problem with jqui_sortable as soon as the output is a generated HTML.

ui <- fluidPage(
  verbatimTextOutput('lposition'),verbatimTextOutput('rposition'),
  numericInput("in", "In:",10),
  fluidRow(
    column(
      width = 5,
      "Left column",
  jqui_sortable(
        div(
          id = "left",
          style = "border: thin solid black; min-height: 600px",
          htmlOutput("htm_info")
        ), 
        # contect the left column to the right column so that elements on the
        # left can be dragged to the right
        options = list(connectWith = "#right")
      )
    ),
    column(
      width = 5,
      "Right column",
      jqui_sortable(
        div(
          id = "right",
          style = "border: thin solid black; min-height: 600px"
        ),
        # contect the right column to the left column so that elements on the
        # right can be dragged to the left
        options = list(connectWith = "#left")
      )
    )
  )
)

server <- function(input, output, session) {

  output$htm_info <- reactive({
      df <- UDFfunction(input$in)
      htm_info <- paste(paste0('<img id="',df$Hash,'" src="',df$Url,'?width=430"/>'),collapse='\n')
      return(HTML(htm_info))
  })

  output$rposition <- renderPrint({
    print(input$right_order$id)
  })

  output$lposition <- renderPrint({
    print(input$left_order$id)
  })

}

an example htm_info will look like this:

htm_info <- c("<img id=\"deee3623010c71fc\" src=\"https://s-ec.bstatic.com/images/hotel/max1280x900/468/46871800.jpg\"/>\n<img id=\"00000002dfffffff\" src=\"https://pix10.agoda.net/hotelImages/489/489266/489266_17032920250052009110.jpg?s=1024x768\"/>\n<img id=\"0040c3e13c7e7f7e\" src=\"https://s-ec.bstatic.com/images/hotel/max1024x768/681/68184730.jpg\"/>")

[renedlog]

It's working with ITEMS but i can't get the orderID's via "input$right_order$id"

      jqui_sortable(
        tags$ul(
          id = "left",
          style = "border: thin solid black; min-height: 600px",
          htmlOutput("htm_info")
        ), 
        # contect the left column to the right column so that elements on the
        # left can be dragged to the right
        options = list(connectWith = "#right",items = "img")
      )

[Yang-Tang]

Hi @renedlog if you want to sort on img, you should set options = list(items = "img") like this:

ui <- fluidPage(
  verbatimTextOutput('lposition'),verbatimTextOutput('rposition'),
  numericInput("in", "In:",10),
  fluidRow(
    column(
      width = 5,
      "Left column",
      jqui_sortable(
        div(
          id = "left",
          style = "border: thin solid black; min-height: 600px",
          htmlOutput("htm_info")
        ), 
        # contect the left column to the right column so that elements on the
        # left can be dragged to the right
        options = list(connectWith = "#right", items = "img")
      )
    ),
    column(
      width = 5,
      "Right column",
      jqui_sortable(
        div(
          id = "right",
          style = "border: thin solid black; min-height: 600px"
        ),
        # contect the right column to the left column so that elements on the
        # right can be dragged to the left
        options = list(connectWith = "#left", items = "img")
      )
    )
  )
)

server <- function(input, output, session) {

  output$htm_info <- reactive({
    # df <- UDFfunction(input$in)
    htm_info <- c("<img id=\"deee3623010c71fc\" src=\"https://s-ec.bstatic.com/images/hotel/max1280x900/468/46871800.jpg\"/>\n<img id=\"00000002dfffffff\" src=\"https://pix10.agoda.net/hotelImages/489/489266/489266_17032920250052009110.jpg?s=1024x768\"/>\n<img id=\"0040c3e13c7e7f7e\" src=\"https://s-ec.bstatic.com/images/hotel/max1024x768/681/68184730.jpg\"/>")
    return(HTML(htm_info))
  })

  output$rposition <- renderPrint({
    print(input$right_order$id)
  })

  output$lposition <- renderPrint({
    print(input$left_order$id)
  })

}

shinyApp(ui, server)