Add images to dynamic table by dragging
<p>I am fighting with this little problem for several days.</p>

<p>I need to select an image from the top row and add it to any chosen cell of the table. I managed to do it on click.</p>

<p>My problem is how to add the same image to the cells by dragging. I tried to use <code>onmouseover</code> if <code>onmousedown</code>, but it did not work at all.</p>

<p>I would prefer not to use jQuery.</p>

<p>This is a simplified version of my code with dummy images. Thanks.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function fillup(img) {
  var symbol = img.src;
  var tbl = document.getElementById("New");
  for (var i = 0; i &lt; tbl.rows.length; i++) {
    for (var j = 0; j &lt; tbl.rows[i].cells.length; j++) {
      tbl.rows[i].cells[j].onclick = (function(i, j) {
        return function() {
          tbl.rows[i].cells[j].innerHTML = '&lt;img src=""&gt;';
          tbl.rows[i].cells[j].innerHTML = '&lt;img src=' + symbol + '&gt;';
        };
      }(i, j));
    }
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border: 1px solid black;
  table-layout: fixed;
  width: 180px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  width: 60px;
  height: 60px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="symbolToolbars" id="symbolToolbars" style="display: inline-block;"&gt;
  &lt;div&gt;
    &lt;a href="#" class="button"&gt;
      &lt;img src="https://www-01.ibm.com/software/be/analytics/images/brandpages/icon-bi60x60.jpg" onclick="fillup(this)" /&gt;
    &lt;/a&gt;
    &lt;a href="#" class="button"&gt;
      &lt;img src="http://www.citiesofthefuture.eu/wp-content/uploads/2016/09/recycle-29227_640-60x60.png" onclick="fillup(this)" /&gt;
    &lt;/a&gt;
    &lt;a href="#" class="button"&gt;
      &lt;img src="https://maincdn-usedsolodresses.netdna-ssl.com/images/bookmark/large/email.jpg" onclick="fillup(this)" /&gt;
    &lt;/a&gt;

  &lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;table border="1" width="180" height="180" id="New" style="cursor: pointer"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>