FC2ブログ

スポンサーサイト

  Clip to Evernote      

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML5でパズルもどき

  Clip to Evernote      

HTML5がどうにも気になり、サンプル紹介しているサイトを
参考にパズルもどきを作ってみました。
ブラウザIEでは上手く表示できないようです。
Firefox、Safari、Chromeでは大丈夫だと思います。


基本はやはりjavascriptで、簡潔に書けるようです。
以下、ソースをそのまま表示しています。
スタイルシートの設定が多く長くみえますが、javascriptは
70行位でした。
<head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <title>Drag & Drop - HTML5</title> <link href="https://static.fc2.com/css_cn/common/headbar/120710style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <style type="text/css"> #wait { float: left; } #dnd-ajax { padding: 10px 20px; border: dotted 1px green; } #dnd-ajax table { border-collapse: collapse; } #dnd-ajax table.opt { margin-left: 0px; } #dnd-ajax table.ans, #dnd-ajax table.opt { border: solid 1px darkgray; } #dnd-ajax table.ans th, #dnd-ajax table.opt th { background-color: whitesmoke; color: #404040; } #dnd-ajax table.ans th, #dnd-ajax table.ans td, #dnd-ajax table.opt th, #dnd-ajax table.opt td { border: solid 1px darkgray; padding: 0px; text-align: center; vertical-align: middle; } #dnd-ajax div.dropzone { width: 130px; height: 104px; margin: 0px; } #dnd-ajax div.dragenter { background-color: orange; } div.draggable { border: solid 0px dimgray; padding: 0px; width: 80px; height: 53px; cursor: move; background-color: white; } div.draggable img { _float: left; } </style> <div> <div id="dnd-ajax"> <table class="question"> <tbody> <tr> <td> <table class="opt"> <tbody> <tr> <td><div id="tmp0_0" class="dropzone"> <div id="opt0_0" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex0y0.jpg" width=130> <td><div id="tmp0_1" class="dropzone"> <div id="opt0_1" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex0y1.jpg" width=130/> <td><div id="tmp0_2" class="dropzone"> <div id="opt0_2" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex0y2.jpg" width=130/> </div> </div> </div> </div> </div> </div> </tr> <tr> <td><div id="tmp1_0" class="dropzone"> <div id="opt1_0" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex1y0.jpg" width=130 /> <td><div id="tmp1_1" class="dropzone"> <div id="opt1_1" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex1y1.jpg" width=130 /> <td><div id="tmp1_2" class="dropzone"> <div id="opt1_2" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex1y2.jpg" width=130 /> </div> </div> </div> </div> </div> </div> </tr> <tr> <td><div id="tmp2_0" class="dropzone"> <div id="opt2_0" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex2y0.jpg" width=130 /> <td><div id="tmp2_1" class="dropzone"> <div id="opt2_1" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex2y1.jpg" width=130 /> <td><div id="tmp2_2" class="dropzone"> <div id="opt2_2" class="draggable"> <img src="https://blog-imgs-46-origin.fc2.com/p/o/t/potkou/aria_peacex2y2.jpg" width=130 /> </div> </div> </div> </div> </div> </div> </tr> </tbody> </table> </td> </tr> <tr> <td> <table class="ans"> <tbody> <tr> <td><div id="ans0_0" class="dropzone"></div></td> <td><div id="ans0_1" class="dropzone"></div></td> <td><div id="ans0_2" class="dropzone"></div></td> </tr> </tbody> </table> </td> </tbody> </table> </div> </div> <script type="text/javascript"> //<![CDATA[ (function() { var $ = function(id){return document.getElementById(id)}; // ドラッグ開始 var doDragStart = function(event) { event.dataTransfer.setData('text', event.currentTarget.id); } // ドロップゾーンに入った var doDragEnter = function(event) { event.currentTarget.setAttribute('class','dropzone dragenter') } // ドロップゾーンに滞在中 var doDragOver = function(event) { if (event.currentTarget.getElementsByClassName('draggable').length === 0) { event.preventDefault(); // ドロップを許可 } } // ドロップゾーンから出た var doDragLeave = function(event) { event.currentTarget.setAttribute('class','dropzone'); } // ドロップされたときの処理 var doDrop = function(event) { event.currentTarget.appendChild($(event.dataTransfer.getData('text'))); } // NodeList(HTMLCollection) を Array に変換 nl2a = function(nl){ var a = []; for (var i = 0; i < nl.length; ++i) { a.push(nl[i]); } return a; } // 初期化 window.addEventListener('load', function(event) { // ドロップゾーン nl2a(document.getElementsByClassName('dropzone')) .filter(function(elm){return elm.nodeName === 'DIV'}) .forEach(function(elm){ elm.addEventListener('dragenter', doDragEnter, false); elm.addEventListener('dragover', doDragOver, false); elm.addEventListener('dragleave', doDragLeave, false); elm.addEventListener('drop', doDrop, false); }); // ドラッグ要素 nl2a(document.getElementsByClassName('draggable')) .filter(function(elm){return elm.nodeName === 'DIV'}) .forEach(function(elm){ elm.getElementsByTagName('img')[0].setAttribute('draggable', 'false'); elm.setAttribute('draggable', 'true'); elm.addEventListener('dragstart', doDragStart, false); }); $('wait').style.display = 'none'; }, false); })(); //]]> </script> <script type="text/javascript" charset="utf-8" src="//static.fc2.com/comment.js" defer></script> <script type="text/javascript" src="//static.fc2.com/js/blog/blog_res.js" defer></script> <div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"> <div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"> <iframe src='//assys01.fc2.com/1341' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --> <div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div> </div> <span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"> <img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /> </span> </div> <script type="text/javascript"> (function(w, d) { var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style; var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; }; var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; }; var overlayPosition = function() { if (getScrollMax() > getScrollCurrent()) { areaStyle.bottom = 0; areaStyle.top = 'auto'; } else { areaStyle.bottom = 'auto'; areaStyle.top = 0; } }; var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; }; if (w.addEventListener) { w.addEventListener('resize', overlayPosition, false); w.addEventListener('scroll', overlayPosition, false); closeBtn.addEventListener('click', close, false); } else { w.attachEvent('onresize', overlayPosition); w.attachEvent('onscroll', overlayPosition); closeBtn.attachEvent('onclick', close); } })(window, document); </script> </body> <script type="text/javascript" src="https://static.fc2.com/js/blog/headbar_ad_load.js?genre=7&20141111" charset="utf-8"></script> <script type="text/javascript" src="https://static.fc2.com/js/blog/ad_ref.js?20121115"></script> </html>
関連記事

コメント

非公開コメント

No title

フェードアウト禁止!ですね(^_^)

No title

このシーンは何度見ても笑えます( `^ω^)

アリスにしてみれば、先輩方のこの姿をみたら
フェードアウトもしたくなりますねw
プロフィール

pot_kou

Author:pot_kou
好きなもの/好きなこと
プラモ アニメ鑑賞 読書 電子工作


Twitterボタン
Twitterブログパーツ

最新記事
最新コメント
月別アーカイブ
カテゴリー
検索フォーム
カウンター
最新トラックバック
RSSリンクの表示
ブロとも一覧
ブロとも申請フォーム

この人とブロともになる

公式サイト
リンク



お勧め
アルバム
イベント
管理者用
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。