title: Drag & Drop doenst not work: 'dropEffect' of undefined
body: <p><strong>Uncaught TypeError: Cannot set property 'dropEffect' of undefined main.js <br />
  Uncaught TypeError: Cannot read property 'files' of undefined</strong> </p>
  
  <p>What's wrong here</p>
  
  <p>.coffee</p>
  
  <pre><code>$ -&gt;
    app = new Viewr
  
  class Viewr
  
    constructor: () -&gt;
      $('#drop_zone')
      .bind('dragover', @handleDragOver)
      .bind('drop', @handleDrop)
  
    handleDrop: (evt) -&gt;
      evt.stopPropagation()
      evt.preventDefault()
      files = evt.dataTransfer.files
  
      @setActiveImage files[0]
  
    handleDragOver: (evt) -&gt;
      evt.stopPropagation()
      evt.preventDefault()
      evt.dataTransfer.dropEffect = "copy"
  
    setActiveImage: (image)-&gt;
      $("img").attr "src", src
  </code></pre>
  
  <p>.Html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="drop_zone" style="width: 100px; height: 100px; border: 2px dashed #bbb;
                                   -moz-border-radius: 5px;
                                   -webkit-border-radius: 5px;
                                   border-radius: 5px;
                                   padding: 25px;
                                   text-align: center;
                                   color: #bbb;"&gt;Drop files here&lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>