内容
JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル
Railsを勉強中ですが、JAVASCRIPTがわからなくなって整理中
画像を選択して、ブラウザ上に表示、ドラッグアンドドロップのみの機能
ドラッグアンドドロップ
http://jsfiddle.net/ginpei/bSF9z/
ここが参考になる。
1 2 3 |
$(function(){ //処理 }); |
と
1 2 3 |
$(window).on("load",function(){ //処理 }); |
の違いは、読み込みデータの違いらしい。
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。
http://qiita.com/nfnoface/items/04c4e1df59c79322c82bを参考にしています。
http://naoyashiga.hatenablog.com/entry/2013/10/22/150030
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<html> <head> <meta charset="UTF-8"/> <title>0325画像を選択するのとドラッグアンドドロップのみ</title> <style> #dropzone { background-color: #cfc; border: solid 3px #9c9; color: #9c9; min-height: 50px; padding: 20px; text-shadow: 1px 1px 0 #fff; } #dropzone.dropover { background-color: #cff; color: #9cc; } #files:empty::before { color: #ccc; content: "(Files data will be shown here.)"; } #files img { border: solid 1px #ccc; cursor: pointer; height: auto; margin: 0 10px; max-height: 128px; max-width: 128px; width: auto; } </style> </head> <body> これはJQUERYを使用していません。inputにinchange=handleFiles(this.files)を指定しています。<br> ちゃんとサムネイルがでるOK。画像を選択する複数対応版、ドラッグアンドドロップするとサムネイルを表示するだけです。アップロードとかDBに登録しません。JAVASCRIPTの勉強とドラッグアンドドロップの学習用です。<br> <a href = "https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file" target= _blank>https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file</a> を参考<br> <br> <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> <br><br> ドラッグアンドドロップ<br> <a href="http://jsfiddle.net/ginpei/bSF9z/" target=_blank>http://jsfiddle.net/ginpei/bSF9z/</a> <br>ここが参考になる。<br> <div id = "dropzone">ここにドラッグアンドドロップしてください </div> <div id="fileList"> <p>画像の表示領域</p> </div> <script> window.URL = window.URL || window.webkitURL; var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), fileList = document.getElementById("fileList"); //ID=fileSelectであるリンクをクリックすると、ID=fileSelectの変数fileSelectのaddEventListenerの処理が //実行され、hidden状態のファイル選択ボタンが隠れているのにかかわらず、fileElem.click()として //クリックされます。そして、ファイル選択ダイアログでファイルを選択したときにonChange状態となり、function handleFiles()が実行されることになります。 //けっこう複雑な動きです。 fileSelect.addEventListener("click", function (e) { if (fileElem) { fileElem.click(); } e.preventDefault(); // prevent navigation to "#" }, false); function handleFiles(files) { if (!files.length) { fileList.innerHTML = "<p>ファイルが選択されていません</p>"; } else { var list = document.createElement("Ol"); for (var i = 0; i < files.length; i++) { var li = document.createElement("li"); list.appendChild(li); var img = document.createElement("img"); img.src = window.URL.createObjectURL(files[i]); img.height = 60; img.onload = function(e) { window.URL.revokeObjectURL(this.src); } li.appendChild(img); var info = document.createElement("span"); info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; li.appendChild(info); } fileList.appendChild(list); } } //ドラッグアンドドロップ ここでドロップすると、ID=fileListに追加されます。 var dropbox; //注意するのは変数名がdropboxでIDがdropzoneになってます。ID側を変更するときは、下のdropzoneの部分を変更します。 dropbox = document.getElementById("dropzone"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } </script> </body> </html> |
JQUERYを使った ボタンクリックのサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>0325_JQuery_Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function(){ $(document).on('click', '#button', function(event, p1, p2){ console.log(arguments); console.log(p1); console.log(p2); }); $(document).on('click', '#button1', function(){ $('#button').trigger('click', [$(this).text()]); }); $(document).on('click', '#button2', function(){ $('#button').trigger('click', [$(this).text(), 'ほげほげ']); }); //こんな書き方もできる ボタンのID $("#button_another").click(function(){ console.log("button_another_click") }); }); </script> </head> <body> <a href=http://qiita.com/nfnoface/items/04c4e1df59c79322c82b target=_blank>http://qiita.com/nfnoface/items/04c4e1df59c79322c82b</a>を参考にしています。 <br> jQueryを使用しています。<br> ボタンを押して、コンソールのログを見るとそれぞれのボタンの出力がわかります。 <button id="button">BUTTON</button><br/><br/> <button id="button1">ボタン1</button><br/><br/> <button id="button2">ボタン2</button><br/><br/> <button id="button_another">別の方法</button><br/><br/> <br> 別のクリック方法<br>下はボタンではないけれど、クリックするとJSが動作します。<br> なお、ブラウザでは何も変化せず、コンソールに出力されます。 参考にしたのは<br> <a href=http://naoyashiga.hatenablog.com/entry/2013/10/22/150030 target=_blank>http://naoyashiga.hatenablog.com/entry/2013/10/22/150030</a><br> <p id='nameless'>nameless function</p> <p id='name'>name function</p> <p id='test'>test</p> <p id='bind'>bind</p> <p id='click'>click</p> <script> function name(){ console.log("name"); } function badSample(t){ console.log("badSample:" + t); } function bindSample(event){ //bindSample:100 console.log("bindSample:" + event.data.num); } function clickSample(event){ //clickSample:100 console.log("clickSample:" + event.data.num); } $("#nameless").click(function(){ console.log("nameless"); }); $("#name").click(name); $("#test").click(badSample(100)); $("#bind").bind("click",{num : 100},bindSample); $("#click").click({num : 100},clickSample); </script> <br> <br> 別のボタンクリックに処理のサンプル<br> <a href=http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/>http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/</a> <br> Button#1をクリックすると数が増加します<br> Button#2をクリックすると2つの数が増加します。<br> <button id="button_sa1">Button #1</button> <button id= "button_sa2">Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div> <script> $("#button_sa1").click(function () { update($("span:first")); }); $("#button_sa2").click(function () { $("#button_sa1").trigger('click'); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); } </script> <pre> $(function(){ //処理 }); </pre> と <pre> $(window).on("load",function(){ //処理 }); </pre> の違いは、読み込みデータの違いらしい。<br> functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。 </body> </html> |