title: Angular 2 drag & drop
body: <p>I have these functions in my index.html of my Angular 2 project:</p>
  
  <pre><code>&lt;script&gt;
  function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("text", "teststring");
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      console.log(data);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I put the functions in my component, it gives the following errors:</p>
  
  <pre><code>Uncaught ReferenceError: drag is not defined at HTMLImageElement.ondragstart
  Uncaught ReferenceError: allowDrop is not defined at HTMLDivElement.ondragover
  </code></pre>
  
  <p>the elements using the functions are in the component html:</p>
  
  <pre><code>&lt;div&gt; ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
      &lt;img&gt; src="smiley.png" draggable="true" ondragstart="drag(event)"&gt;
  &lt;/div&gt;
  
  &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  &lt;/div&gt;
  </code></pre>