HTML 5.1 Reference. - Study at 8am.

HTMLの最新仕様 'HTML 5.1' について学習します。

HTML 5.1: User interaction

ドロップされた要素で発生するイベントです。

Contents:

本家のサイトで勉強する

Example 1-1:

ウィンドウにファイルをドラッグ＆ドロップすると、そのファイルの名前を取得し表示します。

Demo: 結果を別のタブで表示

Code:

HTML

<p>name:<samp></samp></p>
<p>Drop me.</p>

CSS

body {
    background-color: pink;
}

Script

$(document).on({
    "dragover": function(e) {
        e.preventDefault();
    },
    "drop": function(e) {
        e.preventDefault();
        var file = e.originalEvent.dataTransfer.files[0];
        $("samp").text( file.name );
    }
});

Example 1-2:

ウィンドウにファイルをドラッグすると、Bootstrapのモーダルダイアログを表示します。ドロップすると、そのファイルの名前を取得しダイアログに表示します。 (なお「Upload」ボタンを押しても実際にはアップロードされません)

Demo: 結果を別のタブで表示

Code:

HTML

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Upload</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Upload</button>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: pink;
}

Script

$(document).on({
    "dragover": function(e) {
        e.preventDefault();
        $('#myModal').modal('show');
    },
    "drop": function(e) {
        e.preventDefault();
        var file = e.originalEvent.dataTransfer.files[0];
        $('#myModal').find('.modal-body').text( file.name );
    }
});