こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、このところは色々な開発をさせていただいてよく思うのですが、ユーザーさんの行動としては「めんどうだとやらない」という基本を忘れてはいけないなと感じています。そして、最近はそれに加えて「ITリテラシーがあるからこそのユーザビリティ」というのがあるのだなと実感しています。

つまり、

パソコンに慣れている人「あー、、この作業はあっちのサイトだったらビューンってできるのに！」

ってことですね。

そして、その最たる例だと思うのが

ファイルをドラッグ・アンド・ドロップでアップロードさせる機能

です。

私の環境では開発用に２画面を使っているので、例えば上の画面でブラウザを開いて下の画面からファイルをドラッグ・アンド・ドロップするということがよくあったりするんですね。

ということで、今回はそんなドラッグ・アンド・ドロップ機能を wordpress のメディアページように作ってみることにしました。

こんな感じです。
↓↓↓

ではひとつずつコードを書いていきましょう！

開発環境： Laravel 5.8, PHP 7.2, Vue 2.6

1 HTML部分をつくる
2 JavaScript部分をつくる
3 なぜ回数をカウントしているのか
4 ソースコードをダウンロード
5 ちなみに

HTML部分をつくる

まずは基本となる、見た目の部分です。

<div id="app">
    <div style="text-align:center;">ファイルをドラッグ・アンド・ドロップしてください</div>
    <div style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,86,132,.9);z-index:250000;transition: opacity 250ms;" v-if="isDragging">
        <h1 style="position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);font-size:35px;color:#fff;">
            ファイルをドロップしてアップロード
        </h1>
    </div>
</div>

とはいっても、少し変わったところといえばフル画面表示するためのCSS部分だけですし、コピペでOKなので説明は割愛します。

ちなみに、v-ifで使って表示切り替えをすることになりますが、まだVueのコードを書いていないので今この部分は無視されます。

実際に表示するとこうなります。

JavaScript部分をつくる

では、Vueを使ってJavaScript部分をつくっていきましょう。
おおまかに必要なのは以下の３機能です。

（先ほど作った）ウィンドウの切り替え
ドラッグ・アンド・ドロップの各イベント
ドロップされたら何かする（今回はアラート表示）

では、ひとつずつ見ていきましょう！

まずはVueの基本形をつくります。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script>

    new Vue({
        el: '#app'
    });

</script>

そして、必要になる変数と疑似変数をつくります。

new Vue({
    el: '#app',
    data: {
        dragDropCount: 0
    },
    computed: {
        isDragging()  {

            return (this.dragDropCount > 0);

        },
    }
});

あとで詳しく説明しますが、今回は各イベントの回数によってウィンドウの切り替えをするのでdragDropCountには数字が格納され、さらにisDraggingはその回数を元に、現在ファイルがドラッグ中かどうかがわかるtrue/falseの値が格納されるようなっています。

そして最後にイベント部分です。

new Vue({
    
    // 省略

    mounted() {

        document.ondragover =
        document.ondragenter =
        document.ondragleave =
        document.ondrop = (e) => {

            const eventType = e.type;

            if(eventType === 'dragenter') {

                this.dragDropCount++;

            } else if(eventType === 'dragleave') {

                this.dragDropCount--;

            } else if(eventType === 'drop') {

                this.dragDropCount = 0;
                alert('ファイルがドラッグ・アンド・ドロップされました！');

            }

            e.preventDefault();

        };

    }
});

やっているのは、ドラッグ・アンド・ドロップ関連のイベントを作成し、dragenterとdragleaveのときは（先ほど追加した）回数を増減させ、さらにdropのときはアラートを表示するようにしています。

なお、e.preventDefault();がないとファイルをドラッグ・アンド・ドロップした場合にブラウザはそのファイルを表示しようとしてしまう（つまりページが自動で移動する）ので必ずつけておいてください。また、ondragoverも直接関係ないようですが、状況によってはページ移動してしまうことがあるのでわざわざつけています。