我已经花了几天时间解决这个小问题。
我需要从顶部行中选择一张图像,并将其添加到选定单元格中的任何一个。 我已经在点击时成功做到了这一点。
我的问题是如何通过拖动将相同的图像添加到单元格中。 我尝试使用onmouseover
和onmousedown
,但完全没有效果。
我宁愿不使用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>
像这样 tbl.rows[i].cells[j].onmouseover = (function(i, j) {我需要按下鼠标,选择一个单元格并向下或向旁边绘制插入相同的图像。一旦我松开鼠标,就不应再更改任何单元格内容。稍后,我需要选择几个填充有不同图像的单元格,向下拖动并用相同的一组图像填充下面的一些行。 - Albina