Question

所以我有2列填充图像。我想从左列拖动图像并将其放在右列的图像上。然后，左侧的原始图像必须将其显示设置为无，以便它消失。

以下是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

以下是我尝试过的一些Javascript - 它最好不要看起来像它根本不起作用。如果有必要，我可以使用jquery。

document.getElementsByClassName('info2')[0].drop = function() {
    document.getElementsByClassName('myimg2')[0].src = storeOnClick;
    document.getElementsByClassName('myname2')[0].innerHTML=name;
    document.getElementsByClassName('myprof2')[0].innerHTML=prof;
    updateRecord();
    return;
    }

function updateRecord(div){
    div.parentNode.parentNode.parentNode.style.display='none';
}

function returnDrop(el){
if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/QuestionMark.png"){
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png"){
updateRecord1(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley2.png"){
updateRecord2(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley3.png"){
updateRecord3(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley4.png"){
updateRecord4(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley5.png"){
updateRecord5(el);
}
}

function allowDrop(ev) {
    ev.preventDefault();
}

必要但与此问题无关：

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;
}

Answer 1

您可以非常简单地为每张图片添加以下内容:(注意最后一行）

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';
    }

在drop事件中将图像显示为none

1 个答案: