Fügen Sie Bilder zur dynamischen Tabelle hinzu, indem Sie ziehen

Ich kämpfe mit diesem kleinen Problem seit mehreren Tagen.Fügen Sie Bilder zur dynamischen Tabelle hinzu, indem Sie ziehen

Ich muss ein Bild aus der obersten Zeile auswählen und es zu einer beliebigen Zelle der Tabelle hinzufügen. Ich habe es geschafft, es beim Klicken zu tun.
Mein Problem ist, wie Sie das gleiche Bild zu den Zellen durch Ziehen hinzufügen. Ich habe versucht, onmouseover zu verwenden, wenn es auf dem Boden ist, aber es hat überhaupt nicht funktioniert.

Ich würde lieber nicht jquery verwenden.

Dies ist eine vereinfachte Version meines Codes mit Dummy-Bildern. Vielen Dank.

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>

Quelle

2016-10-11 Albina

Mögliche Duplikat [Javascript: Drag & Drop-Image-Tag] (http://stackoverflow.com/ Fragen/12036136/javascript-drag-and-drop-image-tag) –

Nein, ich möchte jQuery nicht verwenden. In dieser Zeile, wenn ich einen Mausklick auf onmouseover ändere, funktioniert es, aber ich habe nicht viel Kontrolle darüber, welche Zellen mit Bildern gefüllt werden. tbl.rows [i] .zellen [j] .onclick = (Funktion (i, j) { so tbl.rows [i] .zellen [j] .onmouseover = (Funktion (i, j) { Ich muss die Maus nach unten, wählen Sie eine Zelle und zeichnen oder beiseite Einfügen des gleichen Bildes während der Bewegung.Kontakt Sobald ich mouse, sollte nicht mehr Zellinhalt geändert werden.A Später muss ich mehrere gefüllt auswählen Mit verschiedenen Bildern Zellen, ziehen Sie nach unten und füllen Sie einige Zeilen mit dem gleichen Satz von Bildern. – Albina

versuchen diesen Code:

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>

Quelle

2017-03-01 11:26:29

Fügen Sie Bilder zur dynamischen Tabelle hinzu, indem Sie ziehen

Antwort

Verwandte Themen