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

Question

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

这是这个问题的后续问题用shinyjqui拖放到网格表。

第一个答案： 我正在尝试使带有标签 A 的项目或按钮可调整大小，如此处所述 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)

Answer 1

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

对于可调整大小的按钮，您的

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)