最近じゃウェブアプリでファイルアップロード機能なぞを実装する時は「それドラッグ&ドロップで」と当たり前のように言われてしまう訳ですが、みなさま如何お過ごしでしょうか。「連休なにそれ美味しいの?」とイタイケな Mariyudu@今日も元気でお仕事ヒャッハーです。
いやね、さっきまでその件でハマッてたんですわ。HTML5 ドラッグ&ドロップは別に初めて書く処理じゃないんだけど、IE (Win7 + IE11)だけでうまく行かないのですな。
こんな感じで画像ファイルをドロップゾーンにドラッグ&ドロップしてみると↓
無慈悲にブラウザが画像をオープンしちゃうという↓
で、コードを少しずつ削りながらネットで流通してるちゃんと動くD&Dのサンプルコードに近づけていく形で切り分けしていったら、ドロップゾーンの div のスタイルが原因でした。IE だとブロック要素にちゃんと
width: 100%; /* デフォでもいちおう指定 */
みたいに width 属性値を明示してやらないと、こんな症状が出るみたいです。あぁ、サクッと終わらして三国志のムック本読もうと思ってたのにぃ…
