share facebook facebook twitter menu hatena pocket slack

HTML5 Drag&Drop

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5でのドラッグ&ドロップについてです。

○index.html

○main.css

#dropArea {
     cursor: pointer;
}

○dd.js

window.addEventListener("load",function(){
    var da = document.getElementById("dropArea");
    da.addEventListener("drop",function(evt){
    var fileList = evt.dataTransfer.files;
    for(var i = 0 ; i      if(window.FileReader && (fileList[i].type.indexOf("image/") == 0)){
        (function(fileObj){
          var reader = new FileReader();
          reader.onload = function(evt){
            var imageObj = new Image();
            imageObj.src = reader.result;
            image.width = 64;
            image.height= 64;
            da.appendChild(imageObj);
          }
          reader.readAsDataURL(fileObj);
        })(fileList[i]);
      }
    }
    da.style.backgroundColor="#eee";
  },true);

  da.addEventListener("dragenter",function(evt){
    evt.preventDefault();
    da.style.backgroundColor="#ecc";
  },true);

  da.addEventListener("dragleave",function(evt){
    evt.preventDefault();
    da.style.backgroundColor="#eee"; 
  },true);

  da.addEventListener("dragover",function(evt){
   evt.preventDefault();
  },true);

  window.addEventListener("drop",function(evt){
    evt.preventDefault();
  },true);

  window.addEventListener("dragover",function(evt){
    evt.preventDefault();
  },true);
},true);

デスクトップからブラウザにドラッグ&ドロップされた複数のファイルから画像のみを表示します。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。