Move Cell in Grid
How do I make an move cell in grid?
What is a move cell in grid? How do you make a move cell in grid? This script and codes were developed by Mnicpt on 30 July 2022, Saturday.
Move Cell in Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Move Cell in Grid</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
#grid { display: relative; margin: 20px auto;
}
.cell { display: inline-block; float: left; border: 1px solid #aaa; width: 100px; height: 100px;
}
.cell.selected { background-color: black; transition: all .5s linear;
}
.buttons { text-align: center;
}
.btn { display: inline-block; cursor: pointer; margin: 5px; line-height: 15px; height: 40px; width: 80px; text-align: center; border: 1px solid #aaa; vertical-align: middle;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="grid"> <!-- cells -->
</div>
<div class="buttons"> <button class="btn up">Move Up</button> <div> <button class="btn left">Move Left</button> <button class="btn right">Move Right</button> </div> <button class="btn down">Move Down</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Move Cell in Grid - Script Codes CSS Codes
* { box-sizing: border-box;
}
#grid { display: relative; margin: 20px auto;
}
.cell { display: inline-block; float: left; border: 1px solid #aaa; width: 100px; height: 100px;
}
.cell.selected { background-color: black; transition: all .5s linear;
}
.buttons { text-align: center;
}
.btn { display: inline-block; cursor: pointer; margin: 5px; line-height: 15px; height: 40px; width: 80px; text-align: center; border: 1px solid #aaa; vertical-align: middle;
}
Move Cell in Grid - Script Codes JS Codes
var grid = function() { var html = "<div class=\"cell\"></div>", $cell = $('<div/>').html(html), $grid = $('#grid'); function clearCells() { $('.cell').each(function(index){ $(this).removeClass('selected'); }); } return { size : 0, width : 0, initWithSize : function(size) { var i = 0, j = 0, markup = "", width = Math.floor(Math.sqrt(size)); // bind click events $('body').on('click', '.btn.left', function(){ grid.moveCellLeft(); }); $('body').on('click', '.btn.right', function(){ grid.moveCellRight(); }); $('body').on('click', '.btn.up', function(){ grid.moveCellUp(); }); $('body').on('click', '.btn.down', function(){ grid.moveCellDown(); }); if (size % width == 0) { this.size = size; this.width = width; $grid.css({width:width * 100 + "px"}); for(i; i < size; i++) { var id = i + 1; markup += $cell.html(); if ((i + 1) % width === 0) { markup += "<br>"; } } $grid.html(markup); $('.cell').each(function(index){ $(this).attr('data-id', index + 1); }); } else { throw "Unbalanced grid size."; } }, selectCell : function(n) { clearCells(); var $selectedCell = $(".cell[data-id='" +n+ "']"); $selectedCell.addClass('selected'); }, moveCellLeft : function() { var $selectedCell = $('.selected'), selectedIndex = $selectedCell.data('id'); if (selectedIndex != 1) { grid.selectCell(--selectedIndex); } }, moveCellUp : function() { var $selectedCell = $('.selected'), selectedIndex = $selectedCell.data('id'); if (selectedIndex > grid.width) { grid.selectCell(selectedIndex - grid.width); } }, moveCellRight : function() { var $selectedCell = $('.selected'), selectedIndex = $selectedCell.data('id'); if (selectedIndex < grid.size) { grid.selectCell(++selectedIndex); } }, moveCellDown : function() { var $selectedCell = $('.selected'), selectedIndex = $selectedCell.data('id'); if (selectedIndex <= (grid.size - grid.width)) { grid.selectCell(selectedIndex + grid.width); } } };
}();
grid.initWithSize(20);
grid.selectCell(Math.ceil(grid.size / 2)); //select center cell
Developer | Mnicpt |
Username | mnicpt |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 3,290 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sketchy Box | 3,033 Kb |
Trinary Tree | 2,282 Kb |
Simple Grid | 4,606 Kb |
Graph API | 4,456 Kb |
Plain JavaScript Calculator | 3,600 Kb |
Apple Playing Cards | 4,618 Kb |
Balanced Binary Search Tree | 2,313 Kb |
IOS 7 Layering | 2,931 Kb |
Rotate Image | 1,843 Kb |
A Pen by mnicpt | 3,851 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Flex layout example | Mofny | 1,663 Kb |
Calculator | Rzencoder | 4,572 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!