jquery可排序卷轴在shinydashboard内部边缘

Question

我使用{shinyjqui} R包在{shinydashboard}中创建jQuery可排序元素。当拖动一个项目到窗口的顶部或底部时，我希望窗口自动滚动。这是默认的jQuery行为。

我认为我需要编辑溢出CSS属性，但不确定做这件事的最佳方式是什么，或者所有需要更改的位置，以及对我的应用程序有什么影响。

在下面的示例中，我可以创建多个产生滚动条的框，但是当该框被拖到边缘时，窗口不会滚动。

library(shinydashboard)
library(shiny)
library(shinyjqui)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(), 
  body = dashboardBody(
    actionButton("add", "add"),
    div(id = "lst"),
  ))

server <- function(input, output, session) {
  
  observeEvent(input$add, {
    jqui_sortable("#lst", operation = "destroy")
    
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = fluidRow(box(title = paste0("test", input$add), h1("test")))
    )
    jqui_sortable("#lst", operation = "enable")
  })
}

shinyApp(ui, server)

​

​

Answer 1

将overflow属性设置为visible对我有效。

只需将这三行添加到dashboardBody()

 tags$style(HTML('.wrapper { overflow: visible;}')),
 tags$style(HTML('.skin-blue { overflow: visible;}')),
 tags$style(HTML('.content-wrapper { overflow: visible !important;}'))

完整的应用程序示例：

library(shiny)
library(shinydashboard)
library(shinyjqui)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(), 
  body = dashboardBody(
    tags$style(HTML('.wrapper { overflow: visible;}')),
    tags$style(HTML('.skin-blue { overflow: visible;}')),
    tags$style(HTML('.content-wrapper { overflow: visible !important;}')),
    actionButton("add", "add"),
    div(id = "lst"),
  ))

server <- function(input, output, session) {
  
  observeEvent(input$add, {
    jqui_sortable("#lst", operation = "destroy")
    
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = fluidRow(box(title = paste0("test", input$add), h1("test")))
    )
    jqui_sortable("#lst", operation = "enable")
  })
}

shinyApp(ui, server)

Answer 2

你的解决方案有效。但是，也可以使用jQuery UI的功能来控制它。您还可以使用options函数的jqui_sortable参数来控制滚动和更多的jQuery小部件的交互，即文档化的这里。可排序选项列出了这里，我们从中找到了滚动、scrollSensitivity、scrollSpeed，它们是选项和排序，它们控制排序的事件。

在javaScript中做你想做的事情是这样的：

  $(".sortable").sortable({
    scroll: true,
    scrollSensitivity: 40,
    scrollSpeed: 1,[
    sort: function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
            topHelper = ui.position.top,
            delta = topHelper - currentScrollTop;
        setTimeout(function() {
            $(window).scrollTop(currentScrollTop + delta);
        }, 5);
    }
});

我们可以像这样在shinyjqui中定义这些选项：

    jqui_sortable("#lst", operation = "enable", options = list(
      scroll = TRUE,
      scrollSensitivity = 40,
      scrollSpeed = 1,
      sort = JS('function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
        topHelper = ui.position.top,
        delta = topHelper - currentScrollTop;
        setTimeout(function() {
          $(window).scrollTop(currentScrollTop + delta);
        }, 5);
      }'))
    )

注意，我只是将滚动、scrollSpeed和scrollSensitivity设置为列表中的项。排序需要一个函数，如上面的函数和文档中所示。

排序(事件，ui )

这就给了我们卷轴：

​

​

这种方法的好处是您可以启用或禁用滚动、控制滚动速度、滚动灵敏度(滚动开始时离边缘有多近)。例如，使用您的解决方案，我可以通过设置涡旋= FALSE来禁用滚动，而它不会滚动。还有更多的交互，而不仅仅是滚动，这就是jQuery UI如此伟大的原因！我推荐这种方法来充分利用jQuery UI。

完整应用程序：

library(shiny)
library(shinyjqui)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(), 
  body = dashboardBody(
    actionButton("add", "add"),
    div(id = "lst"),
  ))

server <- function(input, output, session) {
  
  observeEvent(input$add, {
    jqui_sortable("#lst", operation = "destroy")
    
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = fluidRow(box(title = paste0("test", input$add), h1("test")))
    )
    
    jqui_sortable("#lst", operation = "enable", options = list(
      scroll = TRUE,
      scrollSensitivity = 40,
      scrollSpeed = 1,
      sort = JS('function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
        topHelper = ui.position.top,
        delta = topHelper - currentScrollTop;
        setTimeout(function() {
          $(window).scrollTop(currentScrollTop + delta);
        }, 5);
      }'))
    )
  })
}

shinyApp(ui, server)