Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- <style id="jsbin-css">
- #target {
- position: absolute;
- background: green;
- top: 100px;
- left: 100px;
- width: 200px;
- height: 200px;
- }
- #handle-ne {
- position: absolute;
- background: blue;
- width: 10px;
- height: 10px;
- top: 0;
- left: 0;
- margin-top: -5px;
- margin-left: -5px;
- }
- #handle-ws {
- position: absolute;
- background: blue;
- width: 10px;
- height: 10px;
- bottom: 0;
- right: 0;
- margin-bottom: -5px;
- margin-right: -5px;
- }
- </style>
- </head>
- <body>
- <div id="target">
- <div id="handle-ne" class="handle handle-n handle-w"></div>
- <div id="handle-ws" class="handle handle-e handle-s"></div>
- </div>
- <script id="jsbin-javascript">
- makeResizable('#target');
- function makeResizable(selectors) {
- const resizeGenerators = new Map([
- [ 'n', el => (e => {
- let diff = e.pageY - start.y;
- let top = start.top + diff;
- console.log(diff + " " + start.top + " " + start.height + " " + minHeight)
- if (top < 0) {
- top = 0;
- diff = -start.top;
- } else if (diff > start.height - minHeight) {
- top = start.top + start.height - minHeight;
- diff = start.height - minHeight;
- }
- //console.log(top + " " + diff);
- el.style.top = top + 'px';
- el.style.height = (start.height - diff) + 'px';
- })],
- [ 'e', el => (e => {
- let width = start.width + e.pageX - start.x;
- el.style.width = (width > 0 ? width : 0) + 'px';
- })],
- [ 'w', el => (e => {
- let diff = e.pageX - start.x;
- let left = start.left + diff;
- if (left < 0) {
- left = 0;
- diff = -start.left;
- } else if (diff > start.width) {
- left = start.left + start.width;
- diff = start.width;
- }
- el.style.left = left + 'px';
- el.style.width = (start.width - diff) + 'px';
- })],
- [ 's', el => (e => {
- let height = start.height + e.pageY - start.y;
- el.style.height = (height > 0 ? height : 0) + 'px';
- })],
- ]);
- let start, minHeight;
- let listening = [];
- getElements(selectors).forEach((element) => {
- getElements(selectors + ' .handle').forEach((handle) => {
- handle.addEventListener('mousedown', (e) => {
- start = {
- x: e.pageX,
- y: e.pageY,
- top: parseInt(window.getComputedStyle(element).top, 10),
- left: parseInt(window.getComputedStyle(element).left, 10),
- width: parseInt(window.getComputedStyle(element).width, 10),
- height: parseInt(window.getComputedStyle(element).height, 10),
- }
- minHeight = parseInt(window.getComputedStyle(element).minHeight, 10) || 50;
- console.log(minHeight);
- window.addEventListener('mouseup', stopResize);
- Array.from('news').forEach(dir => {
- if (handle.classList.contains('handle-' + dir)) {
- let func = resizeGenerators.get(dir)(element);
- window.addEventListener('mousemove', func);
- listening.push(func);
- }
- });
- e.preventDefault();
- e.stopPropagation();
- })
- function stopResize() {
- listening.forEach(func => {
- window.removeEventListener('mousemove', func);
- });
- listening = [];
- }
- });
- });
- }
- function getElements(selectors) {
- try {
- return Array.from(document.querySelectorAll(selectors));
- } catch (e) {
- console.log(e);
- return [];
- }
- }
- </script>
- <script id="jsbin-source-css" type="text/css">#target {
- position: absolute;
- background: green;
- top: 100px;
- left: 100px;
- width: 200px;
- height: 200px;
- }
- #handle-ne {
- position: absolute;
- background: blue;
- width: 10px;
- height: 10px;
- top: 0;
- left: 0;
- margin-top: -5px;
- margin-left: -5px;
- }
- #handle-ws {
- position: absolute;
- background: blue;
- width: 10px;
- height: 10px;
- bottom: 0;
- right: 0;
- margin-bottom: -5px;
- margin-right: -5px;
- }</script>
- <script id="jsbin-source-javascript" type="text/javascript">makeResizable('#target');
- function makeResizable(selectors) {
- const resizeGenerators = new Map([
- [ 'n', el => (e => {
- let diff = e.pageY - start.y;
- let top = start.top + diff;
- console.log(diff + " " + start.top + " " + start.height + " " + minHeight)
- if (top < 0) {
- top = 0;
- diff = -start.top;
- } else if (diff > start.height - minHeight) {
- top = start.top + start.height - minHeight;
- diff = start.height - minHeight;
- }
- //console.log(top + " " + diff);
- el.style.top = top + 'px';
- el.style.height = (start.height - diff) + 'px';
- })],
- [ 'e', el => (e => {
- let width = start.width + e.pageX - start.x;
- el.style.width = (width > 0 ? width : 0) + 'px';
- })],
- [ 'w', el => (e => {
- let diff = e.pageX - start.x;
- let left = start.left + diff;
- if (left < 0) {
- left = 0;
- diff = -start.left;
- } else if (diff > start.width) {
- left = start.left + start.width;
- diff = start.width;
- }
- el.style.left = left + 'px';
- el.style.width = (start.width - diff) + 'px';
- })],
- [ 's', el => (e => {
- let height = start.height + e.pageY - start.y;
- el.style.height = (height > 0 ? height : 0) + 'px';
- })],
- ]);
- let start, minHeight;
- let listening = [];
- getElements(selectors).forEach((element) => {
- getElements(selectors + ' .handle').forEach((handle) => {
- handle.addEventListener('mousedown', (e) => {
- start = {
- x: e.pageX,
- y: e.pageY,
- top: parseInt(window.getComputedStyle(element).top, 10),
- left: parseInt(window.getComputedStyle(element).left, 10),
- width: parseInt(window.getComputedStyle(element).width, 10),
- height: parseInt(window.getComputedStyle(element).height, 10),
- }
- minHeight = parseInt(window.getComputedStyle(element).minHeight, 10) || 50;
- console.log(minHeight);
- window.addEventListener('mouseup', stopResize);
- Array.from('news').forEach(dir => {
- if (handle.classList.contains('handle-' + dir)) {
- let func = resizeGenerators.get(dir)(element);
- window.addEventListener('mousemove', func);
- listening.push(func);
- }
- });
- e.preventDefault();
- e.stopPropagation();
- })
- function stopResize() {
- listening.forEach(func => {
- window.removeEventListener('mousemove', func);
- });
- listening = [];
- }
- });
- });
- }
- function getElements(selectors) {
- try {
- return Array.from(document.querySelectorAll(selectors));
- } catch (e) {
- console.log(e);
- return [];
- }
- }
- </script></body>
- </html>
Add Comment
Please, Sign In to add comment