主页 / coding / 问题 / 77031413
Accepted
TarJae
Asked: 2023-09-03 15:58:26 +0800 CST

如何使用 jqui_resizing 使 orderInput 项目可调整大小

  • 772

更新：这是我想要的图形解释：有以下功能：1.用鼠标调整大小，2.旋转文本。

在此输入图像描述 这是这个的后续问题Drag and drop withshinyjqui to a grid-table。

第一个答案：我正在尝试使项目或按钮带有标签 A resizeable，如此处所述https://yang-tang.github.io/shinyjqui/：“可调整大小：使用鼠标更改元素的大小。”

这可能吗？我已经尝试过该包的通用功能 jqui_sortable以及自定义 JS 代码，如下例所示：

library(shiny)
library(shinyjqui)

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

ui <- fluidPage(
  tags$head(
    tags$script(
      JS(
        "
$(document).on('shiny:connected', function() {
$('#letters').resizable({
alsoResize: '.shinyjqui-sortable-item',
minHeight: 20,
minWidth: 20
});
});


$(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: 200px;
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: 10px;
top: 10px;
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", ""),
    )
  ),
  
  orderInput('letters', 'Letters', items = LETTERS[1],
             connect = connections) # defined above
)
)

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

shinyApp(ui, server)

1 个回答

  1. Best Answer

    这是实现这两个功能的一种方法。

    对于可调整大小的按钮，您的JS已经很好了，但您应该将其应用于.btn，而不是#letters。

    旋转按钮可以通过以下方式获得

    $('.btn').on('resize', function() {
    $(this).css({'transform': 'rotate(270deg)',
                 'line-height': $(this).height().toString() + 'px'});
})

    这将产生以下效果：

    1. 如果调整按钮大小（您当然可以删除或更改此触发器），则按钮将旋转 270 度。请注意，更理想的是仅旋转按钮的文本，而不是按钮本身，但我认为必须更HTML深入地操作才能获得这一点。另请注意，它writing-mode: sideways-rl适合于此，但不幸的是，目前并非所有浏览器都支持此功能。

    2. 由于按钮默认情况下具有text-align: center和vertical-align: middle，因此line-height: $(this).height().toString() + 'px'足以设置按钮的文本（此处：“A”）在调整大小后始终显示在按钮的中心。

    这是调整大小后的样子：

    在此输入图像描述

    library(shiny)
library(shinyjqui)

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

ui <- fluidPage(
    tags$head(
        tags$script(
            JS(
                "
$(document).on('shiny:connected', function() {
    $('.btn').resizable({
        alsoResize: '.shinyjqui-sortable-item',
        minHeight: 20,
        minWidth: 20
});

$('.btn').on('resize', function() {
    $(this).css({'transform': 'rotate(270deg)',
                 'line-height': $(this).height().toString() + 'px'});
})
});


$(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: 200px;
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: 10px;
top: 10px;
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", ""),
            )
        ),
        
        orderInput('letters', 'Letters', items = LETTERS[1],
                   connect = connections) # defined above
    )
)

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

shinyApp(ui, server)
    • 1

相关问题