某所で使うかも知れないお絵かきアプリ
[source] [reload] |
var selection = window.getSelection(); selection.collapse (selection.anchorNode, selection.anchorOffset);IE8以前では動かないけど、もういいよね
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dot Picture</title> <style type="text/css"> /* ==================== STYLES ==================== */ .-dot-red { background-color: #FFB4E6; } .-dot-yellow { background-color: yellow; } .-dot-blue { background-color: greenyellow; } .-dot-white { background-color: white; } .-dot { display: inline-block; border: solid 1px; border-color: lightgray; width: 15px; height: 15px; margin:-3px; } .-dot-line { height: 15px; } /* ==================== STYLES ==================== */ </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ var pickup = null; var lastR = null; var lastC = null; $(document).ready(function(){ $('.-dot').each(function(idx){ var $this = $(this); if ('pallet' == $this.data('type')) { $this.on('click', function(){ pickup = $this.attr('class'); }); } else { $this.on('click', function(event){ if (pickup) { var thisR = $this.data('r'); var thisC = $this.data('c'); if (event.shiftKey && lastR && lastC){ var fromC = lastC < thisC ? lastC : thisC; var fromR = lastC < thisC ? lastR : thisR; var toC = lastC < thisC ? thisC : lastC; var toR = lastC < thisC ? thisR : lastR; for(c = fromC; c <= toC; c++) { r = Math.floor(fromR + (toR - fromR) * (c - fromC) / (toC - fromC)); $('div[data-r=\"' + r + '\"][data-c=\"' + c + '\"]').attr('class', pickup); } } else { lastR = thisR; lastC = thisC; $this.attr('class', pickup); } } var selection = window.getSelection(); selection.collapse (selection.anchorNode, selection.anchorOffset); }); } }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> Pallet : <div class="-dot-red -dot" data-type="pallet"></div> <div class="-dot-yellow -dot" data-type="pallet"></div> <div class="-dot-blue -dot" data-type="pallet"></div> <div class="-dot-white -dot" data-type="pallet"></div> <p> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="8"></div> </div> <div class="-dot-line"> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="1"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="2"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="3"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="4"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="5"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="6"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="7"></div> <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="8"></div> </div> </p> </body> </html>