プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML5、ファイルのドラッグ&ドロップを受け付ける
なんかいろいろ書こうと思ったのですが、コード見れば一発だと思うので
こちらをどーぞφ(´-ω-`)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
<!--
    .drag_area {
        width: 200px;
        height: 200px;
        background-color: #faa;
    }
-->
</style>

<script type="text/javascript">
<!--
    // ドラッグ
    function fDragOver(e){
        e.preventDefault();    //決まり文句
    }


    // ドロップ
    function fDrop(e){
        e.preventDefault();    //決まり文句


        //ここにドロップした際の処理を書く

        //取りあえずドラッグしたファイルのファイル名でも表示してみようか
        var f = e.dataTransfer.files[0];
        alert("ファイル名:" + f.name);
    }
//-->
</script>
</head>
<body>

<div class="drag_area" ondragover="fDragOver(event);" ondrop="fDrop(event)">
    ここにファイルをドラッグしてちょーだいな
</div>

</body>
</html>

ファイルをドラッグするとファイル名を表示するサンプルです。
ドラッグしたい要素に「ondragover」と「ondrop」を書いて、
そこで実際に処理する関数を呼び出しているだけです。
「preventDefault()」はイベントキャンセル系のアレですが、決まり文句だと思って構いません。
IE8なんかのHTML5未対応だと動かないのでご注意ください。

ふぅ(´-ω-`)

本当はここからドラッグ&ドロップで行うファイルのアップロード処理に繋げようと思っていました。
でもChromeとかFireFoxとかSafariってドラッグでファイル選択できるのですね。
「<input type="file">」な要素にファイルをドラッグすると、ファイルを選択した状態になります。
あとは送信ボタン押すかだけの違いだし、作ってもあんま意味ないかなぁ(-ε-)と
テンション下がり気味だったりします。

ふぅ\(--)/

※2014/08/10追記
 やっぱりドラッグ&ドロップで行うファイルのアップロード処理も作りました。
 興味のある方は
 「HTML5&JavaScript、ドラッグ&ドロップでファイルをアップロードする
 をご覧ください。
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事