3
將圖像添加到動態表格我正在爲這個小問題奮鬥了好幾天。拖動
我需要從頂行選擇一個圖像,並將其添加到表中的任何選定單元格。我設法做到了點擊。
我的問題是如何通過拖動將相同的圖像添加到單元格。我嘗試使用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>
的可能重複[使用Javascript:拖放圖片標籤(http://stackoverflow.com/問題/ 12036136/javascript-drag-and-drop-image-tag) –
不,我不想使用jQuery。 在這一行,當我改變onclick onmouseover,它的作品,但我沒有太多的控制,以填補圖像的單元格。 tbl.rows [i] .cells [j] .onclick =(function(i,j){ like that tbl.rows [i] .cells [j] .onmouseover =(function(i,j){ 我需要鼠標向下,選擇一個單元格,然後向下或向外插入相同的圖像,同時移動。只要我做鼠標,不應該更改單元格內容應該改變。 後來,我需要選擇幾個填充使用不同的圖像單元格,向下拖動並用同一組圖像填充一些行。 – Albina