読者です 読者をやめる 読者になる 読者になる

私と私の猫の他は誰でも隠し事を持っている

野良プログラマ発、日々のアウトプット

IE11 の HTML5 ドラッグ&ドロップでハマった件

最近じゃウェブアプリでファイルアップロード機能なぞを実装する時は「それドラッグ&ドロップで」と当たり前のように言われてしまう訳ですが、みなさま如何お過ごしでしょうか。「連休なにそれ美味しいの?」とイタイケな Mariyudu@今日も元気でお仕事ヒャッハーです。

いやね、さっきまでその件でハマッてたんですわ。HTML5 ドラッグ&ドロップは別に初めて書く処理じゃないんだけど、IE (Win7 + IE11)だけでうまく行かないのですな。

こんな感じで画像ファイルをドロップゾーンにドラッグ&ドロップしてみると↓
f:id:mariyudu:20140503223459p:plain

無慈悲にブラウザが画像をオープンしちゃうという↓
f:id:mariyudu:20140503223609p:plain

で、コードを少しずつ削りながらネットで流通してるちゃんと動くD&Dのサンプルコードに近づけていく形で切り分けしていったら、ドロップゾーンの div のスタイルが原因でした。IE だとブロック要素にちゃんと

width: 100%; /* デフォでもいちおう指定 */

みたいに width 属性値を明示してやらないと、こんな症状が出るみたいです。あぁ、サクッと終わらして三国志のムック本読もうと思ってたのにぃ…