tohokuaikiのチラシの裏

技術的ネタとか。

Vue.jsのファイルをドラッグ&ドロップでIE11だけ引っかかったところ

IE11だけといいつつ、Safariは調べてないので知らない。

Vue.jsを使って

    <div class="dropArea" :class="{ dragOver: isDragOver }"
      @dragleave.prevent="onDragLeave"
      @dragover.prevent="onDragOver"
      @drop.prevent="onDrop"
      >
      <p>ここにCSVをドラッグ&ドロップしてください。</p>
    </div>

って書いたら、IE11だけ反応しなかった。普通にファイルをダウンロードしてしまう。

解決

DragEnterで引っかかっていたみたい。@dragenter.preventを入れる。

    <div class="dropArea" :class="{ dragOver: isDragOver }"
      @dragenter.prevent=""
      @dragleave.prevent="onDragLeave"
      @dragover.prevent="onDragOver"
      @drop.prevent="onDrop"
      >
      <p>ここにCSVをドラッグ&ドロップしてください。</p>
    </div>