HTML5でファイルのドラッグアンドドロップしてみた

jQueryとSyntaxhighlighter使って、HTMLファイルを読みやすくしてみた。
ファイルのドラッグアンドドロップよりも、むしろ、SyntaxHighlighter.highlight()に気づくまで時間かかった。

Chrome 7.0.517.44とFirefox 3.6.10で動いた。
IE8とSafari 5.0.2は動かなかった。

ここにHTMLファイルをドロップする。

Drop your html files here.

<style>
.drophere {
  padding: 0.25em;
  width: 50%;
  border: 1px solid #666;
  background: #eee;
}
.dragover {
  background: #8f8
}
</style>
<div id="dropzone">
<div class="drophere" align="center">ここにHTMLファイルをドロップする。<br/>
Drop your html files here.</div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function(){
  $('#dropzone .drophere')
    .bind('dragenter', function(ev) {
      $(ev.target).addClass('dragover');
      return false;
    })
    .bind('dragleave', function(ev) {
      $(ev.target).removeClass('dragover');
      return false;
    })
    .bind('dragover', function(ev) {
      return false;
    })
    .bind('drop', function(ev) {
      $(ev.target).removeClass('dragover');
      var dt = ev.originalEvent.dataTransfer;
      for (var i = 0; i < dt.files.length; ++i) {
        var file = dt.files[i];
        var reader = new FileReader();
        reader.onloadend = function() {
          $('#dropzone')
          .append(
          $('<pre/>')
          .html($('<div/>').text(reader.result).html())
          .addClass('brush: html'));
          SyntaxHighlighter.highlight();
        };
        reader.readAsText(file, 'utf-8');
      }
      return false;
    });
});
</script>