CINXE.COM
ドラッグ&ドロップで、PC ローカルから or HTML 内部からのドロップなのかを判定する | Basicinc Enjoy Hacking!
<!DOCTYPE html><html lang="ja" data-scope-path="layouts/application"><head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"><link crossorigin="" href="https://www.google-analytics.com/analytics.js" rel="preconnect" /><link rel="preload" href="/fonts/noto-sans-jp-v24-japanese-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/fonts/noto-sans-jp-v24-japanese-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"><!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-25666851-3"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-25666851-3'); </script> <link rel="stylesheet" media="all" href="/assets/ress-d1ba3a251927ab1f2bcc841c9a810109355bcb4260a522a0f76452fdc2fe6095.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/application-dda4ec688c139c8f29c39a2a795bcf4af04c4326643549a37f5d8843fffaebab.css" /><link rel="stylesheet" media="all" href="/assets/scopes/articles/show-37905516c06229c8fde10714e660fc48bc7b6ce7881755707db8b0327ceb5bf1.css" /><link rel="stylesheet" media="all" href="/assets/scopes/partials/_viewer-3a78a10250bb498047a06b71271b62ea949e304d25b9781c4450cf998aa2640c.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_header-db87b54171cc020758ab7d1494677f8f6c2e9c93b453e896af82e4814eaacc7c.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_breadcrumbs-744a099ab0b9eb5c4bd45215617e267c7d7c404ddddce8810eead5335512e637.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_footer-a06961717440c6d0183c582c7f21768011f334d368f51b614eabc87bb17b3bbf.css" /><script src="/packs/application-02365dbc4dc28919eee1.js" defer="defer"></script><link href="/icon.png" rel="icon" type="image/png" /><link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png" /><link href="/feed" rel="alternate" title="RSS2.0" type="application/rss+xml" /><title>ドラッグ&amp;ドロップで、PC ローカルから or HTML 内部からのドロップなのかを判定する | Basicinc Enjoy Hacking!</title><meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="j4m7cmdiyZYx/BgwiidWeWMcZu0jfiM641RX/RIDDNgglXRAWN9NX69/RtmvyWDFWX2zR6jxU9zqKsei+kAYTg==" /><meta content="width=device-width,initial-scale=1" name="viewport" /><meta content="ドラッグ&ドロップで、PC ローカルから or HTML 内部からのドロップなのかを判定する | Basicinc Enjoy Hacking!" property="og:title" /><meta content="article" property="og:type" /><meta content="2020-05-28T13:55:25+09:00" property="article:published_time" /><meta content="zaru" property="article:author" /><meta content="Technology" property="article:section" /><meta content="https://tech.basicinc.jp/articles/207" property="og:url" /><meta content="https://tech.basicinc.jp/assets/default_eyecatch-9e0d94e7defd5e124532d0b790a8f8cccfdffa0aed4581afa5f932cfec0b39a2.png" property="og:image" /><meta content="image/png" property="og:image:type" /><meta content="1200" property="og:image:width" /><meta content="630" property="og:image:height" /><meta content="HTML ドラッグ & ドロップ API を使うことで、ファイルのアップロードやリストの並び替えなどが可能になります。今回はドラッグ & ドロップのファイルアップローダーを作る際に、PC ローカルからドラッグされているのか、HTML ページ内部の要素をドラッグしているのかを..." property="og:description" /><meta content="ja_JP" property="og:locale" /><meta content="summary" name="twitter:card" /><meta content="@zaru" name="twitter:creator" /></head><body><header data-scope-path="layouts/_header"><div class="header-contents"><a class="root-link" href="/"><svg class="site-logo"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#logo"></use></svg><div class="site-title">Enjoy Hacking!</div></a><div class="site-desc">Basicinc エンジニアブログ</div></div></header><nav data-scope-path="layouts/_breadcrumbs"><ul class="breadcrumbs" itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList"><span class="pretext">% cat </span> <li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">~</span></a><meta itemprop="position" content="1" /></li>/<li class="current" itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem"><span itemprop="name">ドラッグ&ドロップで、PCローカルからorHTML内部からのドロップなのかを判定する.md</span><meta itemprop="item" content="https://tech.basicinc.jp/articles/207" /><meta itemprop="position" content="2" /></li></ul></nav><div data-scope-path="articles/show"><article class="article"><h1 class="article-title">ドラッグ&ドロップで、PC ローカルから or HTML 内部からのドロップなのかを判定する</h1><div class="article-desc"><a class="article-author" href="/authors/1"><img class="article-author-avatar" src="https://tech.basicinc.jp/uploads/e868e5fb1e34b970ae7d8e04c454ff28.png" /><span class="article-author-name">zaru</span></a><div class="article-date-info"><time class="article-posted-date">Posted 2020-05-28</time></div></div><div class="article-body"><div data-scope-path="partials/_viewer"><p>HTML ドラッグ & ドロップ API を使うことで、ファイルのアップロードやリストの並び替えなどが可能になります。今回はドラッグ & ドロップのファイルアップローダーを作る際に、PC ローカルからドラッグされているのか、HTML ページ内部の要素をドラッグしているのかを判定する方法を紹介します。</p> <p>早速コードです。</p> <pre lang="html" class="highlight highlight-html"><span class="nt"><script></span> <span class="kd">function</span> <span class="nx">dragover_handler</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="k">if</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">dataTransfer</span><span class="p">.</span><span class="nx">types</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">Files</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">drop from PC (desktop or Finder etc)</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">drop from HTML</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nx">drop_handler</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// 実際のドロップ後の処理</span> <span class="p">}</span> <span class="nt"></script></span> <span class="nt"><div</span> <span class="na">ondrop=</span><span class="s">"drop_handler(event)"</span> <span class="na">ondragover=</span><span class="s">"dragover_handler(event)"</span><span class="nt">></span>Drop Zone<span class="nt"></div></span> </pre> <p>判定するタイミングはドロップ完了時点の <code>ondrop</code> ではなく、手前の <code>ondragover</code> で判定させます。なぜかと言うと、多くのドラッグインターフェイスは、ドラッグ中にエリアの上にポインタが重なった時に、ドロップエリアのスタイルを変更することが多いですが、ドロップ対象じゃないものの場合にはスタイルを変更させたくないからです。</p> <h2>ローカルからのファイルドラッグは常に Files になる</h2> <p>ドラッグイベントオブジェクトには <code>dataTransfer</code> が存在しています。ここからドロップするファイル情報が読み取れます。そこで <code>dataTransfer.types</code> プロパティを見て、ドラッグしている要素のタイプを取得します。</p> <p>ローカルからドラッグしている場合は、どんなファイルであれ文字列の <code>Files</code> だけが格納されています。というわけで、この <code>Files</code> が格納されている場合はローカルからファイルをドラッグしていると判定が可能です。</p> <p>また、HTML 内部のドラッグ可能な要素、例えば画像をドラッグすると <code>["text/uri-list","text/html"]</code> というタイプになります。テキストだと <code>["text/plain","text/html"]</code> です。ドラッグ中のタイミングだと HTML 内部のリソースであっても完全なファイル情報は読み取れません。</p> <p>完全なファイル情報を読み取るにはドロップが完了した <code>ondrop</code> のタイミングでないとダメです。</p> <h3>そもそもドラッグさせない</h3> <p>他の対処方法として、HTML 内部のリソースをドラッグ不可能な要素にすることもできます。</p> <pre lang="html" class="highlight highlight-html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"./hoge.png"</span> <span class="na">draggable=</span><span class="s">"false"</span><span class="nt">></span> </pre> <p>しかし、ケースによっては全ての HTML 要素に指定しないといけない場合もあるので、ドロップエリアで判定ができるならそうした方がいい場合もあると思います。</p></div></div><div class="article-sns-share-buttons"><a rel="nofollow" target="_blank" class="pocket-share sns-share-button" href="http://getpocket.com/edit?title=%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%80%81PC+%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%8B%E3%82%89+or+HTML+%E5%86%85%E9%83%A8%E3%81%8B%E3%82%89%E3%81%AE%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%AA%E3%81%AE%E3%81%8B%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F207"><svg class="sns-icon pocket-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#pocket"></use></svg></a><a rel="nofollow" target="_blank" class="hatena-share sns-share-button" href="http://b.hatena.ne.jp/add?mode=confirm&title=%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%80%81PC+%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%8B%E3%82%89+or+HTML+%E5%86%85%E9%83%A8%E3%81%8B%E3%82%89%E3%81%AE%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%AA%E3%81%AE%E3%81%8B%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F207"><svg class="sns-icon hatena-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#hatena"></use></svg></a><a rel="nofollow" target="_blank" class="twitter-share sns-share-button" href="https://twitter.com/share?text=%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%80%81PC+%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%8B%E3%82%89+or+HTML+%E5%86%85%E9%83%A8%E3%81%8B%E3%82%89%E3%81%AE%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%AA%E3%81%AE%E3%81%8B%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F207"><svg class="sns-icon twitter-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#twitter"></use></svg></a><a rel="nofollow" target="_blank" class="facebook-share sns-share-button" href="http://www.facebook.com/share.php?u=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F207"><svg class="sns-icon facebook-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#facebook"></use></svg></a></div></article></div><footer data-scope-path="layouts/_footer"><div class="footer-contents"><a class="root-link" href="/"><svg class="site-logo"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#logo"></use></svg><div class="site-title">Enjoy Hacking!</div></a><ul class="link-list"><li class="link-list-item"><a class="link" href="https://basicinc.jp/" rel="noopener" target="_blank">株式会社ベーシック</a></li><li class="link-list-item"><a class="link" href="https://basicinc.jp/enjoy-hacking" rel="noopener" target="_blank">エンジニア募集</a></li><li class="link-list-item"><a class="link" href="https://qiita.com/organizations/basicinc" rel="noopener" target="_blank">Qiita</a></li><li class="link-list-item"><a class="link" href="https://www.wantedly.com/companies/basicinc/projects" rel="noopener" target="_blank">Wantedly</a></li></ul></div></footer></body></html>