赤いセロファンっぽいもの gct256 Follow 2010-11-12 23:26:48 License: MIT License Fork3 Fav9 View4283 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 32 lines HTML 6 lines CSS 28 lines 赤い四角をドラッグ drag a red square 赤いセロファンっぽいもの var front = document.getElementById('front'); var back = document.getElementById('back'); var drag = null; front.addEventListener('mousedown', function(ev) { var rect = back.getBoundingClientRect(); var x = ev.pageX, y = ev.pageY; if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) { drag = [rect.left - x, rect.top - y]; ev.preventDefault(); } }, false); back.addEventListener('mousedown', function(ev) { var rect = back.getBoundingClientRect(); drag = [rect.left - ev.pageX, rect.top - ev.pageY]; ev.preventDefault(); }, false); window.addEventListener('mousemove', function(ev) { if (drag) { back.style.left = drag[0] + ev.pageX + 'px'; back.style.top = drag[1] + ev.pageY + 'px'; } }, false); window.addEventListener('mouseup', function() { drag = null; }, false); <div id="front"> <p>Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit, sed do eiusmod <span class="loose">tempor</span> incididunt ut <span>labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <span class="loose">consequat</span>. Duis aute irure dolor in reprehenderit in <span>voluptate</span> velit esse cillum <span class="loose">dolore</span> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="back"></div> 赤いセロファンっぽいもの body { overflow:hidden; background:#fff; } #front { position:absolute; z-index:100; } #front span { color:#f33; } #front span.loose { color:#f11; } #back { position:absolute; width:200px; height:200px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#f33; z-index:1; } 赤い四角をドラッグ drag a red square var front = document.getElementById('front'); var back = document.getElementById('back'); var drag = null; front.addEventListener('mousedown', function(ev) { var rect = back.getBoundingClientRect(); var x = ev.pageX, y = ev.pageY; if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) { drag = [rect.left - x, rect.top - y]; ev.preventDefault(); } }, false); back.addEventListener('mousedown', function(ev) { var rect = back.getBoundingClientRect(); drag = [rect.left - ev.pageX, rect.top - ev.pageY]; ev.preventDefault(); }, false); window.addEventListener('mousemove', function(ev) { if (drag) { back.style.left = drag[0] + ev.pageX + 'px'; back.style.top = drag[1] + ev.pageY + 'px'; } }, false); window.addEventListener('mouseup', function() { drag = null; }, false); <div id="front"> <p>Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit, sed do eiusmod <span class="loose">tempor</span> incididunt ut <span>labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <span class="loose">consequat</span>. Duis aute irure dolor in reprehenderit in <span>voluptate</span> velit esse cillum <span class="loose">dolore</span> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="back"></div> body { overflow:hidden; background:#fff; } #front { position:absolute; z-index:100; } #front span { color:#f33; } #front span.loose { color:#f11; } #back { position:absolute; width:200px; height:200px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#f33; z-index:1; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 赤い四角をドラッグ drag a red square Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author gct256 URLhttp://d.hatena.ne.jp/gct/ くだらないことやしょーもないことに力を注ぎます。 http://twitter.com/gct256 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/1b1y/js"></script> neta Discussion Questions on this code? Tags drag neta Favorite by paq 9re h2ospace k0rin termat yupasM tosh: drag crispy: neta sh19910711: 面白い！ Forked sort by latest page views favorite forked forked: 赤いセロファンっぽいもの teetteet 00 724 33/6/28 neta forked from: 赤いセロファンっぽいもの tosh 00 806 49/19/28 緑のセロファンっぽいもの forked from: 赤いセロ gct256 14 2560 33/6/30 neta
