Html 使用shinyjqui拖放到网格表中

下面是一个有两个变化的例子:第一，orderInput的connections参数不应该引用网格表，而应该引用网格单元格:

connections <- paste0("droppable_cell_", 1:7)

其次，每个网格单元必须是sortable，它连接到letters，并且在将字母放在其上时具有append().由于我目前没有让它与shinyjqui个内置函数一起运行，所以我用一个小的定制JS来实现它:

$(function() {
    $('[id^=droppable_cell]').sortable({
        connectWith: '#letters',
        drop: function(event, ui) {
                  $(this).append(ui.draggable);
              }
    })
});

我还以.grid-cell的样式将padding设置为5px，这样字母就会出现在单元格的中间.

library(shiny)
library(shinyjqui)

connections <- paste0("droppable_cell_", 1:7) # id of the grid cells

ui <- fluidPage(
    tags$head(tags$script(
        JS(
            "
                       $(function() {
                           $('[id^=droppable_cell]').sortable({
                               connectWith: '#letters',
                               drop: function(event, ui) {
                                         $(this).append(ui.draggable);
                                     }
                           })
                        });
                        "
        )
    ),
    # some styling
    tags$style(
        HTML(
            "
            .grid-table {
                width: 150px;
                border-collapse: collapse;
            }
            .grid-cell {
                width: 100%;
                height: 50px;
                border: 1px solid black;
                background-color: white;
                text-align: center;
                margin: 0;
                padding: 5px;
            }
            .grid-cell-text {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                background-color: steelblue;
                color: white;
                font-size: 18px;
            }
            .droppable-cell {
                background-color: lightgray;
            }
            .table-container {
                display: flex;
                position: absolute;
                left: 550px;
                top: 30px;
                margin-top: 0px;
                overflow: hidden;
            }
            "
        )
    )),
    
    div(
        class = "table-container",
        div(
            class = "grid-table",
            id = "my_grid",
            div(
                class = "grid-row",
                div(class = "grid-cell grid-cell-text", "my_grid"),
                div(id = "droppable_cell_1", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_2", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_3", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_4", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_5", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_6", class = "grid-cell droppable-cell", ""),
                div(id = "droppable_cell_7", class = "grid-cell droppable-cell", "")
            )
        ),
        
        orderInput('letters', 'Letters', items = LETTERS[1:7],
                   connect = connections) # defined above
    )
)

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

shinyApp(ui, server)