通过拖动将图像添加到动态表答案

【问题标题】：Add images to dynamic table by dragging通过拖动将图像添加到动态表
【发布时间】：2016-10-11 01:38:19
【问题描述】：

我为这个小问题奋斗了好几天。

我需要从第一行中选择一个图像并将其添加到表格的任何选定单元格中。我设法做到了点击。

我的问题是如何通过拖动将相同的图像添加到单元格中。如果onmousedown，我尝试使用onmouseover，但它根本不起作用。

我宁愿不使用 jQuery。

这是我的代码的简化版本，带有虚拟图像。谢谢。

function fillup(img) {
  var symbol = img.src;
  var tbl = document.getElementById("New");
  for (var i = 0; i < tbl.rows.length; i++) {
    for (var j = 0; j < tbl.rows[i].cells.length; j++) {
      tbl.rows[i].cells[j].onclick = (function(i, j) {
        return function() {
          tbl.rows[i].cells[j].innerHTML = '<img src="">';
          tbl.rows[i].cells[j].innerHTML = '<img src=' + symbol + '>';
        };
      }(i, j));
    }
  }
}

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 180px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  width: 60px;
  height: 60px;
}

<div class="symbolToolbars" id="symbolToolbars" style="display: inline-block;">
  <div>
    <a href="#" class="button">
      <img src="https://www-01.ibm.com/software/be/analytics/images/brandpages/icon-bi60x60.jpg" onclick="fillup(this)" />
    </a>
    <a href="#" class="button">
      <img src="http://www.citiesofthefuture.eu/wp-content/uploads/2016/09/recycle-29227_640-60x60.png" onclick="fillup(this)" />
    </a>
    <a href="#" class="button">
      <img src="https://maincdn-usedsolodresses.netdna-ssl.com/images/bookmark/large/email.jpg" onclick="fillup(this)" />
    </a>

  </div>
</div>
<br />
<table border="1" width="180" height="180" id="New" style="cursor: pointer">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

【问题讨论】：

Javascript : drag and drop image tag的可能重复
不，我不想使用 jQuery。在这一行中，当我将 onclick 更改为 onmouseover 时，它可以工作，但我无法控制哪些单元格要填充图像。 tbl.rows[i].cells[j].onclick = (function(i, j) { 这样 tbl.rows[i].cells[j].onmouseover = (function(i, j) { 我需要鼠标按下，选中一个单元格，向下拖动或者一边移动一边插入同一张图片。鼠标一抬起，单元格内容就不会再改变了。稍后，我需要选择几个填充了不同图像的单元格，向下拖动并用相同的图像集填充下面的一些行。

标签： javascript drag-and-drop dom-events

【解决方案1】：

试试这个代码：

var symbol="";
function fillup(img) {
	symbol = img.src;
}

function load(){
  var tbl = document.getElementById("New");
  for (var i = 0; i < tbl.rows.length; i++) {
    for (var j = 0; j < tbl.rows[i].cells.length; j++) {
      tbl.rows[i].cells[j].onmouseenter =  function(){
          if(symbol!=""){
			this.innerHTML = '<img src="">';
			this.innerHTML = '<img src=' + symbol + '>';
			symbol = "";
			}
		};
    }
  }
}

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 180px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  width: 60px;
  height: 60px;
}

<body onload="load()">
    <div class="symbolToolbars" id="symbolToolbars" style="display: inline-block;">
      <div>
        <a href="#" class="button">
          <img src="https://www-01.ibm.com/software/be/analytics/images/brandpages/icon-bi60x60.jpg" onmousedown="fillup(this)" />
        </a>
        <a href="#" class="button">
          <img src="http://www.citiesofthefuture.eu/wp-content/uploads/2016/09/recycle-29227_640-60x60.png" onmousedown="fillup(this)" />
        </a>
        <a href="#" class="button">
          <img src="https://maincdn-usedsolodresses.netdna-ssl.com/images/bookmark/large/email.jpg" onmousedown="fillup(this)" />
        </a>

      </div>
    </div>
    <br />
    <table border="1" width="180" height="180" id="New" style="cursor: pointer">
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

</body>

【讨论】：