闪亮的小部件，可更改矢量中元素的顺序 [英] Shiny widget to change the order of elements in a vector

问题描述

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

On quite a few websites you have a drag and drop interface to change the order of elements in a list. I am looking for something similar in Shiny. I want the user to be able to drag and drop elements of a list to change the priority by changing the order.

现在，我有一个滥用<$ c的解决方案$ c> selectizeInput（）。此作品，但它很快就变得很麻烦时的选项列表变得更大

Right now I have a solution that abuses selectizeInput(). This works, but it quickly becomes cumbersome when the list of choices becomes larger.

这是说明：

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])
    })
  }
)

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

Downside: To change the order at the end of the list, the user has to select the entire list in the correct order. One mistake and he has to start all over again.

愿望清单：一个闪亮的小部件（可能来自另一个包装），最好是拖放操作，可以进行这种操作

Wishlist: a Shiny widget (possibly from another package), preferably drag and drop, that can make this kind of action more convenient.

推荐答案

您可以使用自定义输入对象即可。有很多库可以做到这一点，这是一个这个的示例。

You can use a custom input object to do this. There's a bunch of libraries to do this, here's an example with this one.

以下是javascript中有光泽的绑定代码，需要包含在应用程序的 www 文件夹中：

Here is the Shiny binding code in javascript that needs to be included in the www folder of your app:

sortableList.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 事件更改它们。

It is very minimal, it creates the Sortable instance on initialisation and returns the order of the elements whenever the user changes them using the onUpdate event of the library.

下面是一个示例应用程序，带有R代码来创建元素：

Here's an example app with the R code to create the element:

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)

sortableList 函数包括 Sortable 库和 sortableList.js 和Shiny绑定代码，并创建保存包含传递给 value 的向量的值的div。

The sortableList function includes both the Sortable library and the sortableList.js with the Shiny binding code, and creates divs holding the values of the vector passed to value.

我的应用目录如下：

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

然后我使用 runApp（ application-dir）来启动应用程序。

And I use runApp("application-dir") to start the app.

这篇关于闪亮的小部件，可更改矢量中元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！