This is a follow-up question to this Drag and drop with shinyjqui to a grid-table.
I am trying to make the item or button with the label A resizeable like explained here https://yang-tang.github.io/shinyjqui/: 'Resizable: Change the size of an element using the mouse.'
Is this possible? I have tried the generic function of the package jqui_sortable and also a custom JS code like in the example below:
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)
