jQuery可排序滚动在shinydashboard内的边缘答案

【问题标题】：jquery sortable scroll at edge inside shinydashboardjQuery可排序滚动在shinydashboard内的边缘
【发布时间】：2021-12-30 21:26:22
【问题描述】：

我正在使用 {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)

【问题讨论】：

标签： jquery r shiny shinydashboard shinyjqui

【解决方案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)

【讨论】：

【解决方案2】：

您的解决方案有效。但是，也可以使用 jQuery UI 的功能来控制它。您还可以使用jqui_sortable 函数的options 参数来控制滚动以及jQuery Widgets 的更多交互，记录在here。列出了可排序的选项here，从中我们可以找到scroll、scrollSensitivity、scrollSpeed，它们是options和sort，控制排序的事件。

在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);
      }'))
    )

请注意，我只是将滚动、滚动速度和滚动敏感度设置为列表中的项目。排序需要一个函数，在上面的函数中可以看到，在documentation中也可以看到：

排序（事件，用户界面）

这给了我们卷轴：

这种方法的好处是您可以启用或禁用滚动、控制滚动速度、滚动灵敏度（滚动开始时应离边缘多近）。例如，使用您的解决方案，我可以通过设置 scroll = 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)

【讨论】：