Início / coding / Perguntas / 77031413
Accepted
TarJae
Asked: 2023-09-03 15:58:26 +0800 CST

Como tornar um item orderInput redimensionável com jqui_resizable

  • 772

Atualização: Aqui está uma explicação gráfica do que eu quero: Existem recursos: 1. redimensionar com o mouse e 2. girar o texto.

insira a descrição da imagem aqui Esta é uma pergunta complementar a este arrastar e soltar com brilhantejqui para uma tabela de grade .

Primeira resposta: estou tentando tornar o item ou botão com o rótulo A redimensionável, como explicado aqui https://yang-tang.github.io/shinyjqui/ : 'Redimensionável: altere o tamanho de um elemento usando o mouse.'

Isso é possível? Tentei a função genérica do pacote jqui_sortablee também um código JS customizado como no exemplo abaixo:

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 respostas

  1. Best Answer

    Aqui está uma abordagem para implementar os dois recursos.

    Para os botões redimensionáveis, o seu JSjá é bom, mas você deve aplicá-lo em .btn, não em #letters.

    Os botões girados podem ser obtidos por

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

    Isto terá os seguintes efeitos:

    1. Se um botão for redimensionado (é claro que você pode excluir ou alterar esse gatilho), o botão será girado 270 graus. Observe que o mais desejável é girar apenas o texto do botão, não o botão em si, mas acho que é preciso manipular mais HTMLa fundo para conseguir isso. Observe também que writing-mode: sideways-rlé adequado para isso, mas infelizmente atualmente não é compatível com todos os navegadores.

    2. Como os botões possuem text-align: centere vertical-align: middlepor padrão, line-height: $(this).height().toString() + 'px'é suficiente para configurar que o texto do botão (aqui: "A") sempre será exibido no centro do botão após o redimensionamento.

    É assim que ficaria após o redimensionamento:

    insira a descrição da imagem aqui

    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

relate perguntas