{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/wrote-jquery-plugin-of-drag-and-drop/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"afa47ab5-5f7f-5dae-a82f-4ce587a3888a","excerpt":"こんにちは。 セミが鳴き出しましたね。夏、嫌な季節です。 さて、Macで良いリネームアプリを探しているのですが、 なかなか決定版が見つからずに嘆いています。 そんな時ふと思いました。 (使ったことないけど)HTML5のFileAPI…","html":"<p>こんにちは。<br>\nセミが鳴き出しましたね。夏、嫌な季節です。</p>\n<p>さて、Macで良いリネームアプリを探しているのですが、<br>\nなかなか決定版が見つからずに嘆いています。<br>\nそんな時ふと思いました。</p>\n<p>(使ったことないけど)<strong>HTML5のFileAPI使えばリネームって出来るんじゃないか？</strong></p>\n<p>あと、いちいちファイルをチューザーからファイルを選択するのも面倒だし、<br>\n<strong>HTML5のDrag&#x26;DropAPI使ってブラウザにファイルをドロップできるようにしよう！</strong></p>\n<p>と思いFileAPIとDrag&#x26;DropAPIを調べてみたら、<br>\nちょっとした小物を作るのにも地味に面倒だったのでメモを残します。</p>\n<!--more-->\n<h2 id=\"file-apiとは\" style=\"position:relative;\"><a href=\"#file-api%E3%81%A8%E3%81%AF\" aria-label=\"file apiとは permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>File APIとは？</h2>\n<p>File APIとは、HTML5で提供されているAPIです。<br>\nローカルファイルやディレクトリの読み書きが出来るオブジェクトです。</p>\n<p>例えば、バイナリデータを扱う<code>Blob</code>や、<br>\nファイルの読み取りを行う<code>FileReader</code>などがあります。</p>\n<p>ファイルの書き込みが出来るインタフェースもあるのですが、<br>\nまだChromeのみしか実装を終えておらず、限定的な環境だったので、<br>\n<strong>リネームツールは諦めて</strong>、単にファイルの情報を読取ることを目的としました。</p>\n<blockquote>\n<p><a href=\"http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">File API （日本語訳）</a><br>\n<a href=\"http://msdn.microsoft.com/ja-jp/library/ie/hh673542(v=vs.85).aspx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">File API (Windows)</a></p>\n</blockquote>\n<h2 id=\"dragdrop-apiとは\" style=\"position:relative;\"><a href=\"#dragdrop-api%E3%81%A8%E3%81%AF\" aria-label=\"dragdrop apiとは permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Drag&#x26;Drop APIとは？</h2>\n<p>Drag&#x26;Drop APIとは、ページ内の要素をドラッグ可能にしたり、<br>\nそのまま要素へのドロップを可能にするAPIです。</p>\n<blockquote>\n<p>ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、<br>\nマウスで引きずるように移動させて他の場所に置く操作のことです。<br>\nHTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、<br>\nHTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。<br>\n<a href=\"http://www.htmq.com/dnd\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ドラッグ＆ドロップ－HTML5のAPI、および、関連仕様</a></p>\n</blockquote>\n<h2 id=\"ブラウザにファイルをドロップできるようにする\" style=\"position:relative;\"><a href=\"#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B\" aria-label=\"ブラウザにファイルをドロップできるようにする permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ブラウザにファイルをドロップできるようにする</h2>\n<p>簡単に各APIの概要を追ったところで、本題です。<br>\n通常、ブラウザへファイルをドロップすると、そのファイルが開かれると思います。</p>\n<p>画像をドロップすればその画像が表示されます。<br>\nプログラムやCSSのファイルならその内容が表示されます。<br>\nHTMLファイルをドロップすれば、そのHTMLを解釈した結果が確認できと思います。</p>\n<p>このようにファイルをブラウザにドロップする操作は、<br>\nイベントなので<strong>jsでキャンセルができます</strong>。</p>\n<p>つまりどういうことかと言うと、<br>\nサンプルページを用意したので、適当なファイルをドロップしてみて下さい。</p>\n<p><a href=\"http://closet.leko.jp/2013/filedrop/drop-cancel.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ファイルのドロップをキャンセルするサンプル</a></p>\n<p>如何でしょう。 枠の中にファイルをドロップしても何も起こらないと思います。</p>\n<p>従来ブラウザにファイルをドロップした時に起きるイベントを、<br>\nすべてキャンセルしています。</p>\n<p>まとめると、<br>\n<strong>ブラウザのデフォルトの挙動をキャンセルして、<br>\n独自のイベントハンドラを書くことで、<br>\nファイルがドロップされたことを検知し、扱うことが可能</strong>になる<br>\nと言うことです。</p>\n<h2 id=\"ドロップされたファイルを読み取る\" style=\"position:relative;\"><a href=\"#%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%95%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8B\" aria-label=\"ドロップされたファイルを読み取る permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ドロップされたファイルを読み取る</h2>\n<p>先ほどのサンプルで、<br>\nファイルのドロップイベントを受け取ることが出来るようになったので、<br>\n次はドロップされたファイルを読み取ってみようと思います。</p>\n<p>ただ単にファイル名、ファイルサイズ、ファイルの種類を取得するだけなら、<br>\nFileReaderを使わずに取得できます。</p>\n<p>ただし、ファイルの内容を読み取るには、<br>\nFileAPIの<code>FileReader</code>インタフェースを使います。</p>\n<p>ざっとサンプルコードを。<br>\n動作確認はこちらからできます。</p>\n<p><a href=\"http://closet.leko.jp/2013/filedrop/drop-file.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ブラウザにファイルをドロップしてその内容を読み取るサンプル</a></p>\n<h3 id=\"ドロップされたファイルの取得\" style=\"position:relative;\"><a href=\"#%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%95%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%8F%96%E5%BE%97\" aria-label=\"ドロップされたファイルの取得 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ドロップされたファイルの取得</h3>\n<p>ドロップされたファイルは、dropイベントに渡されるeventオブジェクトから取得出来ます。<br>\n<code>e.originalEvent.dataTransfer.files</code><br>\nでドロップされたファイルにアクセスできます。</p>\n<p><strong>files</strong>と複製形になっていることから分かるように、<br>\n複数のファイルをまとめてドロップしても、<strong>まとめて取得できます</strong>。</p>\n<h3 id=\"ファイル取得時の注意点\" style=\"position:relative;\"><a href=\"#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%8F%96%E5%BE%97%E6%99%82%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9\" aria-label=\"ファイル取得時の注意点 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>ファイル取得時の注意点</strong></h3>\n<p>取得したファイルは、<code>FileList</code>オブジェクトというものになっており、<br>\n配列のように各要素にブラケット（<code>[]</code>）でアクセスできますが、<br>\n<strong>配列ではありません</strong>。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 495px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a393a918108c30c120ef3283c42bc5cc/a4d88/20130704_dump_filelist.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 3.592814371257485%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'14\\'%20viewBox=\\'0%200%20400%2014\\'%20preserveAspectRatio=\\'none\\'/%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/a393a918108c30c120ef3283c42bc5cc/5251b/20130704_dump_filelist.webp 167w,\n/static/a393a918108c30c120ef3283c42bc5cc/7390e/20130704_dump_filelist.webp 334w,\n/static/a393a918108c30c120ef3283c42bc5cc/19998/20130704_dump_filelist.webp 495w\"\n              sizes=\"(max-width: 495px) 100vw, 495px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/a393a918108c30c120ef3283c42bc5cc/21521/20130704_dump_filelist.png 167w,\n/static/a393a918108c30c120ef3283c42bc5cc/86d36/20130704_dump_filelist.png 334w,\n/static/a393a918108c30c120ef3283c42bc5cc/a4d88/20130704_dump_filelist.png 495w\"\n            sizes=\"(max-width: 495px) 100vw, 495px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/a393a918108c30c120ef3283c42bc5cc/a4d88/20130704_dump_filelist.png\"\n            alt=\"2013070\"\n            title=\"2013070\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>こんな感じ。</p>\n<p>関数に渡される<strong>arguments</strong>のようなオブジェクトです。<br>\nなので、配列のメソッドをそのまま使うことができません。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 467px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d2e69438a9764bd862572ee9d546d13e/85ff8/20130704_filelist_error.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 3.592814371257485%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'15\\'%20viewBox=\\'0%200%20400%2015\\'%20preserveAspectRatio=\\'none\\'/%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/d2e69438a9764bd862572ee9d546d13e/5251b/20130704_filelist_error.webp 167w,\n/static/d2e69438a9764bd862572ee9d546d13e/7390e/20130704_filelist_error.webp 334w,\n/static/d2e69438a9764bd862572ee9d546d13e/45771/20130704_filelist_error.webp 467w\"\n              sizes=\"(max-width: 467px) 100vw, 467px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/d2e69438a9764bd862572ee9d546d13e/21521/20130704_filelist_error.png 167w,\n/static/d2e69438a9764bd862572ee9d546d13e/86d36/20130704_filelist_error.png 334w,\n/static/d2e69438a9764bd862572ee9d546d13e/85ff8/20130704_filelist_error.png 467w\"\n            sizes=\"(max-width: 467px) 100vw, 467px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/d2e69438a9764bd862572ee9d546d13e/85ff8/20130704_filelist_error.png\"\n            alt=\"2013070\"\n            title=\"2013070\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>エラー。</p>\n<p>ただ、argumentsと同じように、callを使うことで配列に変換出来ます。<br>\n用途によりますが、配列にしておいたほうが使える範囲が広がると思います。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> tmp <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>originalEvent<span class=\"token punctuation\">.</span>dataTransfer<span class=\"token punctuation\">.</span>files<span class=\"token punctuation\">,</span> files <span class=\"token operator\">=</span> <span class=\"token class-name\">Array</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span><span class=\"token function\">slice</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span>tmp<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>Array<span class=\"token punctuation\">.</span><span class=\"token function\">isArray</span><span class=\"token punctuation\">(</span>tmp<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// false console.log(Array.isArray(files)); // true</span></code></pre></div>\n<h3 id=\"各イベントの説明\" style=\"position:relative;\"><a href=\"#%E5%90%84%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%AA%AC%E6%98%8E\" aria-label=\"各イベントの説明 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>各イベントの説明</h3>\n<p>おそらくイベント名を見ればお察しかと思いますが、<br>\nこのサンプルで使っているイベントの簡単な説明を。</p>\n<ul>\n<li><code>dragenter</code>\n<ul>\n<li>ドラッグした状態でマウスカーソルが要素に入ったとき</li>\n</ul>\n</li>\n<li><code>dragover</code>\n<ul>\n<li>ドラッグした状態でマウスカーソルが要素の上を移動させたとき</li>\n</ul>\n</li>\n<li><code>dragleave</code>\n<ul>\n<li>ドラッグした状態でマウスカーソルが要素から外れたとき</li>\n</ul>\n</li>\n<li><code>drop</code>\n<ul>\n<li>ドラッグしたものが要素の中でドロップされたとき</li>\n</ul>\n</li>\n<li><code>FileReader.onload</code>\n<ul>\n<li><strong>FileReader.readAsText</strong>などでファイルの読み取りが完了したとき</li>\n<li>読み込んだ内容は<code>e.target.result</code>で取れます</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"jqueryfile-dropjs\" style=\"position:relative;\"><a href=\"#jqueryfile-dropjs\" aria-label=\"jqueryfile dropjs permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>jQuery.file-drop.js</h2>\n<p>これらのサンプルを手軽に利用できるように、jQueryプラグイン化してみました。<br>\nサンプルは<a href=\"http://closet.leko.jp/2013/filedrop/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら</a>から確認できます。</p>\n<p>先ほどのサンプルのまんまでは面白く無いので、<br>\n画像がドロップされたら、その画像を表示するという処理を入れてみました。</p>\n<p>文字列から画像を復元する方法については、また別途記事を書こうと思います。</p>\n<p>使い方はこんな感じです。</p>\n<p>jQuery.filedrop.jsは4つのオプションを提供します。</p>\n<ul>\n<li>dragEnter\n<ul>\n<li>ブラウザのデフォルトの挙動をキャンセルしている以外、dropenterイベントと同じです</li>\n</ul>\n</li>\n<li>dragLeave\n<ul>\n<li>ブラウザのデフォルトの挙動をキャンセルしている以外、dropleaveイベントと同じです</li>\n</ul>\n</li>\n<li>drop\n<ul>\n<li>ファイルがドロップされた際に実行される</li>\n<li>引数はドロップされたファイルの配列</li>\n</ul>\n</li>\n<li>dropEach\n<ul>\n<li>ファイルが１つドロップされた際に実行される</li>\n<li>複数のファイルがドロップされた場合は、ファイルの個数分呼び出される</li>\n<li>第一引数にドロップされたFileオブジェクト</li>\n<li>第二匹数にファイルの内容の文字列が渡される</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"まとめ\" style=\"position:relative;\"><a href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-label=\"まとめ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>まとめ</h2>\n<p>ファイルの読み取りは簡単なのに、書き込みがファイルの面倒でした。。。</p>\n<p>ドラッグ&#x26;ドロップについては、<br>\nAPIがなくても、mouseoverやmousedownを使って書けますが、<br>\nAPIを用いたほうが可読性が高く柔軟なコードになると思います。</p>\n<p>環境に制限が無いなら、こちらを使ってみるといいと思います。</p>\n<p>最後に、jQuery.filedrop.jsのソースはGistに上げてあります。<br>\n最期まで読んで頂き、ありがとうございました！</p>\n<p><a href=\"https://gist.github.com/Leko/5927774\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">jquery.filedrop.js</a></p>\n<h2 id=\"参考リンク\" style=\"position:relative;\"><a href=\"#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF\" aria-label=\"参考リンク permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>参考リンク</h2>\n<blockquote>\n<p><a href=\"http://www.html5rocks.com/ja/tutorials/file/dndfiles/#toc-selecting-files-dnd\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JavaScript でのローカル ファイルの読み込み – HTML5 Rocks</a></p>\n</blockquote>","timeToRead":9,"frontmatter":{"title":"webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた","tags":["HTML5 Drag and Drop API","JavaScript"],"date":"July 04, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='143'%20viewBox='0%200%20400%20143'%20preserveAspectRatio='none'%3e%3cpath%20d='M32%2014h-9l-1%204v8l-1%206c-1%201-1%201%201%201%202-1%202-1%201%201v8c1%202%201%203-1%205-2%203-2%203-1%204v22c-2%201-1%202%201%202%201-1%202%202%200%203l-1%202v4c2%201%201%208-1%2010v3l1%204v7c-2%204-2%206-1%206v4l1%202%201%203c-1%204%202%207%205%205h3l2%201h2c1%201%202%201%204-1l3-1%202%201h2l2%201h11c2-2%203-2%203-1h9l3-1%202%201h2l7%201h7l2-1h8l1%201h2c0%201%202%201%204-1l4-1h6l4%201h6l1%201h4l3-1%203-1h4l2%201h4l4%201h3l4-1h2l2%201h3c2-1%207-1%207%201l4-2c5-2%205-2%206%200%200%202%201%202%205%200s4-2%205%200l2%202%204-2%204-2%201%202c2%202%202%202%204%201h6l3-1%209%201h8l1-4c1-5%201-6-3-4-2%202-4%202-5%201h-10l-2-1h-3l-4%201-4%201h-2l-1-1-2-1h-8l-3%201h-2l-2-1c1-2-1-1-4%201s-3%202-5%200l-4-1h-5c-2%202-3%202-3%201h-5c0-1-7-1-10%201h-2l-9-1-4%201h-2l-3-1-4-1h-5l-1-1-3%202-2-1h-1l-4%201h-5c-2%202-3%202-3%201l-3-1c-3%201-5%200-7-1h-5c0-2-1-1-5%201-2%202-3%202-4%201s-2-1-4%201h-2c1-2%200-2-4-2h-3l-2-1h-3l-4%201-4%201h-2l-2-1c0-1-1-1-3%201h-3l-1-1-2-1-4%201-4%201-1-2c-2-2-3-12-1-15v-3l1-1c1-2%200-4-2-2l-1-2%201-2%201-1v-7c2-4%202-7%200-7v-3c2-1%201-3%200-3-2%200-2-1-1-2v-3l1-2c2-2%202-6%200-6-1%201-2-3%200-6v-2c-2%200-3-3-1-4v-7l1-5c2-3%202-4%201-5v-3l1-3c-3%200-3-2-2-4l8-1h9l6-1h6l1%201h5c3-2%209-2%2010-1h18c2-2%206%200%204%201-1%202%201%201%205-1l4-1h5l2%201h5c2-2%203-2%203-1l2%201h10l1%201%204-1c3-2%205-2%205-1h3l2-1c0%202%202%203%203%201h4c2-1%202-1%204%201s2%202%204%200h4l4-1h2l2%201%201%201%204-1c3-2%203-2%203%200h7l3-1c0%202%200%202%203%200h6l1%201h14l5%201h5l2%201c3-1%203%201%202%204-2%203-2%204-1%204v2c-3%202-4%201-3-4%200-5%200-5-11%200a1257%201257%200%2001-42%2020c15-2%2031%201%2045%209l6%203v-4c0-4%200-5%204-4%203%200%204%202%202%203-3%201-2%203%200%203%201%201%202%201%201%202l1%202v3l1%202-1%202-1%203v7c1%202%200%203-1%205v5c2%202%202%202%200%204v3c2%202%202%2016-1%2016v2l3%202v1l1%201%203-1%201-3%201-5c2-1%201-4-1-4s-2-2%200-6l1-3c-3%200-3-2-2-4v-6c-1-2-1-3%201-5%202-3%202-4%201-5V67l1-5c-1-3%200-5%201-6l2-11c1-12%201-12-2-12-2%200-2%200-1-1s0-2-2-4l-1-3%201-3%201-2%201-1-2-1-2-2c0-2-2-3-2-1-1%202-3%201-2%200%200-2-1-2-3-1h-1c-1-1-2%200-4%201h-4c-1-1-4-2-6-1h-2c-1-1-2-1-4%201l-4%201-2-1h-7c0-2-5-2-9%200h-4l-2-1c1-1-1-1-4-1h-5l-4%201-4%201h-2l-2-1h-3c-2%202-4%202-4%201h-14l-2-1h-6c-2%202-2%202-3%201h-3c-2%202-2%202-4%200s-3-2-5%200h-2c0-2%200-2-4%200H91l-3%201h-5l-1-1h-7l-10-1h-4l-8%201h-5c-1%202-3%201-2%200%200-2-1-2-3%200-3%201-4%201-4-1h-1l-3-1-3%201m215%2028c-2%2016-2%2014%207%2017l7%202%205-26c0-2-1-2-9-2h-9l-1%209m22%204l-3%2015%204%203c5%202%205%202%205%200a11021%2011021%200%20016-29l-5-1h-5l-2%2012m20-10l-8%2032%203%201c3%201%203%201%207-16l5-17h-7m15%2022v5c1%202%202%202%202-1s2-6%202-3l1%201h13l1-1c2%200%203%203%203%204l1%201c2%201%202%200%202-3%200-5%202-4%202%201v5l1-4%201-3h5c3%200%204%201%203%204%200%202%202%201%203-1v-5c-3-3-37-3-40%200M90%2063c0%204%200%204-3%203-4%200-6%202-6%208s5%2011%208%207h2c1%201%201%200%201-10l-1-12-1%204m65%207c0%2010%200%2011%202%2011h3c3%203%208-4%207-10-1-4-3-5-7-5-3%201-3%201-3-3l-1-4-1%2011m-86-9l-1%202-1%202v2c1%201%200%207-1%206l-1%201v2c1%200%202%201%202%203-1%202%201%202%202%200%200-4%202-4%202-1l1%204%201-2%202-3v-3c-1-2%200-6%201-7v-2l-1-3v-2c-1%200-2%201-2%203l-1%202-1-2c0-3-1-4-2-2m43%207c-4%204%200%2014%205%2014%204%200%207-11%203-14-2-2-6-2-8%200m14%209l1%2011%201-4c0-4%200-4%202-3%204%202%208-3%207-10-1-4-2-5-7-5h-4v11m15-10c0%201%201%202%204%202%205-1%205%201%200%203-3%201-4%202-4%204-1%203%202%206%205%205h4c1%201%201%200%201-7v-7l-5-1-5%201m45%200c-3%204-2%2012%202%2014%202%201%207%200%207-1l-2-1c-2%201-3%200-4-1-3-2-2-3%202-3%205-1%206-3%204-7-2-2-7-3-9-1m121%202c-3%201-3%201-3%205%201%204%202%205%202%201l1-4h1c0%202%201%202%204%202l4-1%202-1%201%201c-1%201%201%201%204%201%204-1%205%200%205%201l1%201v2c-3%202-2%202%201%202%202%200%202%200%201-1-2%200-2-1-1-1l2-4c0-2%200-3%201-2h1l1%201%204%201c5-1%207%200%206%202v6h-18l-20%201c-3%201-4%204-2%207%201%201%201%201%201-2s2-5%202-2h1l1-1c0%201%201%202%203%201%203%200%203%200%202%202h2c1-2%201-2%201%201l1%204v-3c0-4%201-5%204-3h1c0-2%208-1%208%201%201%203%203%202%203-1%200-2%200-3%203-3l3%201%203%201%202%202h1c1-2%204-3%204-1h3c5-2%206-1%206%203v3l1-3c0-4%200-4%203-4%202%200%202%200%202%204-1%202-1%203%201%203v-2h1c1%201%201%201%201-1%200-6%200-7%202-4l1%201c0-2%202-1%203%202%200%203%200%203%202%202v-7c-1-2-19-3-21-1l-5%202c-3%200-3%200%200-1%206-1%208-5%204-9l-6-2h-2l2-1c2%200%202%200%201-1-1-2-38-2-43-1m-2%2027c-2%203-2%204%200%204l1-1c-1-1%200-1%201-1l4-1%203%201c1%202%202%201%203%200%202-2%202-2%203-1%200%202%201%202%202%201s2%200%202%203v1l1-1h1l1%201v-1c0-2%200-2%205-3h3c-1%202%200%202%202%200%201-1%202-1%202%201s3%204%203%203c2-1%201-6-1-7l-18-1c-16%200-17%200-18%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.783333333333333,"src":"/static/3cdbf2534d7661f34cf6e52f9c185ee4/f32f2/featured-image.jpg","srcSet":"/static/3cdbf2534d7661f34cf6e52f9c185ee4/466a3/featured-image.jpg 334w,\n/static/3cdbf2534d7661f34cf6e52f9c185ee4/f32f2/featured-image.jpg 569w","srcWebp":"/static/3cdbf2534d7661f34cf6e52f9c185ee4/3d427/featured-image.webp","srcSetWebp":"/static/3cdbf2534d7661f34cf6e52f9c185ee4/cd98f/featured-image.webp 334w,\n/static/3cdbf2534d7661f34cf6e52f9c185ee4/3d427/featured-image.webp 569w","sizes":"(max-width: 569px) 100vw, 569px"}}}}}},"pageContext":{"slug":"/wrote-jquery-plugin-of-drag-and-drop/","previous":{"fields":{"slug":"/introduction-of-emmet/"},"frontmatter":{"title":"Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫","tags":["CSS","Emmet","HTML"]}},"next":{"fields":{"slug":"/11-apps-improve-your-development-in-sublimetext2/"},"frontmatter":{"title":"Sublime Text2の作業効率を加速させるパッケージ11個","tags":["AOJ","JavaScript","Ruby","Sublime Text2"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}