Javascript 在拖放事件中将图像显示为无

所以我有两列图片。我想从左列拖动一个图像，然后将其放到右列的图像上。然后，左侧的原始图像必须将其显示设置为“无”，以使其消失

以下是html的一个示例：

<div id="container1">
<table class="table1">
    <tr>
        <td>
            <div class="info1" id="info1" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div  style="float:left">
                    <img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
                </div>
                <div style="float:left;">
                    <p class="myname">Name: Jane Doe</p>
                    <p class="myprof">Profession: Carpenter</p>
                </div>
            </div>
        </td>
    </tr>
</table>
</div>

<div id="container2">
<table class="table2">
    <tr>
        <td>
            <div class="info2" onmousedown = "returnDrop(this.querySelector('img').src)" ondragover="allowDrop(event)" ondrop="drop()" >
                <div  style="float:left">
                    <img class="myimg2" style="max-height:80px;" src="Pictures/QuestionMark.png">
                </div>
                <div style="float:left;">
                    <p class="myname2">Name: Unspecified</p>
                    <p class="myprof2">Profession: Unspecified</p>
                </div>
            </div>
        </td>
    </tr>
</table>
</div

必要但与问题无关：

function start(){
    first();
}
function first () {
    var _divs = document.querySelectorAll('.info1');
    for (var i = 0; i < _divs.length; i++) {
        _divs[i].addEventListener("mousedown", function () { changeInfo1(this) }, false);
    }
}
function changeInfo1(el) {
        myimg = el.querySelector('.myimg'),
        myname = el.querySelector('.myname'),
        myprof = el.querySelector('.myprof')

    // img
    storeOnClick = myimg.src;
    // name
    name = myname.innerHTML;
    // profession
    prof = myprof.innerHTML;
}

函数开始（）{
第一个（）；
}
函数优先（）{
var_divs=document.querySelectorAll（'.info1'）；
对于（变量i=0；i<\u divs.length；i++）{
_divs[i].addEventListener（“mousedown”，函数（）{changeInfo1（this）}，false）；
}
}
功能更改信息1（el）{
myimg=el.querySelector（'.myimg'），
myname=el.querySelector（'.myname'），
myprof=el.querySelector（'.myprof'）
//img
storeOnClick=myimg.src；
//名字
name=myname.innerHTML；
//职业
prof=myprof.innerHTML；
}

您可以非常简单地为每个图像添加以下内容：（注意最后一行）

---

您没有显示

allowDrop

和

returnDrop

函数的定义？@RahilWazir在中编辑了它，不知道是否要包含它sorry@Genome314是否确实要将其显示设置为

none

或将其从源中删除。。？

function start(){
    first();
}
function first () {
    var _divs = document.querySelectorAll('.info1');
    for (var i = 0; i < _divs.length; i++) {
        _divs[i].addEventListener("mousedown", function () { changeInfo1(this) }, false);
    }
}
function changeInfo1(el) {
        myimg = el.querySelector('.myimg'),
        myname = el.querySelector('.myname'),
        myprof = el.querySelector('.myprof')

    // img
    storeOnClick = myimg.src;
    // name
    name = myname.innerHTML;
    // profession
    prof = myprof.innerHTML;
}

document.getElementsByClassName('info2')[0].drop = function() {
    document.getElementsByClassName('myimg2')[0].src = storeOnClick;
    document.getElementsByClassName('myname2')[0].innerHTML=name;
    document.getElementsByClassName('myprof2')[0].innerHTML=prof;
    if(storeOnClick=='file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png'){
    document.getElementsByClassName('info1')[0].parentNode.style.display='none';
    }