用于更改向量中元素顺序的闪亮小部件

在很多网站上，您都有一个拖放界面来更改列表中元素的顺序。我正在寻找类似的东西闪亮。我希望用户能够拖放列表中的元素，通过更改顺序来更改优先级。

现在我有一个滥用的解决方案selectizeInput()。这是可行的，但当选择列表变得更大时，它很快就会变得很麻烦。

举例说明：

library(shiny)

shinyApp(
  ui = shinyUI({
    fluidPage(
      title = "Example for ordering objects",
      sidebarLayout(
        sidebarPanel(uiOutput("selection"),
                     actionButton('update',"Update")),
        mainPanel(
          helpText('The order of elements'),
          tableOutput('theorder')
        )
      )
    )
  }),
  server = function(input, output, session) {
    values <- reactiveValues(x = c('Item1','Item2','Item3'))

    output$selection <- renderUI({
      selectizeInput('neworder',
                     'Select new order',
                     choices = values$x,
                     multiple = TRUE)
    })

    output$theorder <- renderTable(
      values$x
    )

    observeEvent(input$update,{
      id <- values$x %in% input$neworder
      values$x <- c(input$neworder, values$x[!id])
    })
  }
)

缺点：要更改列表末尾的顺序，用户必须按正确的顺序选择整个列表。一次错误，他就必须重新开始。

愿望清单：一个闪亮的小部件（可能来自另一个包），最好是拖放，可以使这种操作更加方便。

您可以使用自定义输入对象 http://shiny.rstudio.com/articles/building-inputs.html去做这个。有很多库可以做到这一点，这是一个例子this one https://github.com/RubaXa/Sortable.

这是 javascript 中的 Shiny 绑定代码，需要包含在www您的应用程序的文件夹：

可排序列表.js

var sortableListBinding = new Shiny.InputBinding();
$.extend(sortableListBinding, {
  find: function(scope) {
    return $(scope).find(".sortableList");
  },
  getValue: function(el) {
    if (typeof Sortable.active != 'undefined'){
      return Sortable.active.toArray();
    }
    else return "";
  },
  subscribe: function(el, callback) {
    $(el).on("change.sortableListBinding", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".sortableListBinding");
  },
  initialize: function(el) {
    Sortable.create(el,{
      onUpdate: function (evt) {
          $(el).trigger("change");
    }});
  }
});

Shiny.inputBindings.register(sortableListBinding);

它非常小，它在初始化时创建 Sortable 实例，并在用户使用以下命令更改元素时返回元素的顺序onUpdate图书馆的活动。

下面是一个示例应用程序，其中包含用于创建元素的 R 代码：

app.R

library(shiny)
library(htmlwidgets)

sortableList <- function(inputId, value) {
  tagList(
    singleton(tags$head(tags$script(src="http://rubaxa.github.io/Sortable/Sortable.js"))),
    singleton(tags$head(tags$script(src = "sortableList.js"))),
    tags$div(id = inputId,class = "sortableList list-group",
             tagList(sapply(value,function(x){
               tags$div(class="list-group-item","data-id"=x,x)
             },simplify = F)))
  )
}

ui <- fluidPage(
  sortableList('sortable_list',c(2,3,4)),
  sortableList('sortable_list2',c(5,6,7)),
  textOutput('test'),
  textOutput('test2')
)

server <- function(input, output, session) 
{
 output$test <- renderText({input$sortable_list})
 output$test2 <- renderText({input$sortable_list2})
 }

shinyApp(ui=ui, server=server)

The sortableList功能包括Sortable图书馆和sortableList.js使用闪亮的绑定代码，并创建保存传递给的向量值的divvalue.

我的应用程序目录如下所示：

<application-dir>
|-- www
    |-- sortableList.js
|-- app.R

我用runApp("application-dir")启动应用程序。