Last active
June 14, 2021 21:07
-
-
Save tomardern/4923cab6dd9daa31a4b2ff07a7408ada to your computer and use it in GitHub Desktop.
JQuery Resize and Sortable/Drag and Drop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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