Skip to content

Instantly share code, notes, and snippets.

@tomardern

tomardern/resize.html

Last active June 14, 2021 21:07
Show Gist options
  • Save tomardern/4923cab6dd9daa31a4b2ff07a7408ada to your computer and use it in GitHub Desktop.
Save tomardern/4923cab6dd9daa31a4b2ff07a7408ada to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Resize and Sortable/Drag and Drop
Raw
resize.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery UI Resizable - Constrain resize area</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#container {
margin: 50px;
width: 600px;
height: 600px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
/* lines */
background-size: 100px 100px, 100px 100px;
background-image: linear-gradient(to right, #c7c7c7 1px, transparent 1px),
linear-gradient(to right, #ececec 1px, transparent 1px);
background-position: 0px 0px, 50px 50px;
}
.resizable {
/* background-position: top left; */
width: 100px;
height: 100px;
opacity: 0.8;
border: none !important;
outline: 1px solid grey;
background: #fbfbfb;
}
.resizable:hover {
background: #e2e2e2;
}
.ui-resizable-resizing {
background: #e2e2e2;
}
/* .ui-sortable-placeholder {
position: relative;
display: block;
height: 50px;
width: 20px;
align-self: center;
background: none;
border: none;
}
.ui-sortable-placeholder:after {
content: ' ';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 40px;
width: 3px;
margin: auto;
background: black;
} */
.ui-resizable-helper {
opacity: 0.8;
}
.resize {
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$('#container').sortable({
forceHelperSize: true,
start: function(e, ui) {
ui.placeholder.height(ui.item.height());
ui.placeholder.width(ui.item.width());
}
// placeholder: 'ui-state-highlight'
});
$('#container').disableSelection();
let size = 50;
let resizeOptions = {
// handles: 'n, e, s, w, ne, se, sw, nw, all',
containment: '#container',
maxHeight: 600,
maxWidth: 600,
minHeight: size,
minWidth: size,
grid: [size, size]
};
$('.resizable:not(.resize)').resizable(resizeOptions);
$('.resize').click(() => {
$('#container .resize').before('<div class="resizable"></div>');
$('#container .resizable:not(.resize):last').resizable(resizeOptions);
});
});
</script>
</head>
<body>
<div id="container" class="ui-widget-content">
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable resize"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment