拖動 - VoidCC

將圖像添加到動態表格我正在爲這個小問題奮鬥了好幾天。拖動

我需要從頂行選擇一個圖像，並將其添加到表中的任何選定單元格。我設法做到了點擊。
我的問題是如何通過拖動將相同的圖像添加到單元格。我嘗試使用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>

來源

2016-10-11 Albina

的可能重複[使用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

試試這個代碼：

var symbol=""; 
 
function fillup(img) { 
 
\t 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!=""){ 
 
\t \t \t this.innerHTML = '<img src="">'; 
 
\t \t \t this.innerHTML = '<img src=' + symbol + '>'; 
 
\t \t \t symbol = ""; 
 
\t \t \t } 
 
\t \t }; 
 
    } 
 
    } 
 
}

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>

來源

2017-03-01 11:26:29

拖動

回答

相關問題