Question

我正在创建一个应用程序（用于UI测试），该应用程序具有可放入特定插槽的伪列表中的div。一经提出，其想法就是简单地更改类名以模仿被拖动项的className的外观。该列表的样式设置为显示为列表，但是在放下时，该类将更改为图形。

问题是，当拖动目标与放置目标相同时，原始拖动目标将替换为图形版本。

请暂停！哦，请不要使用jquery，只有在可能的情况下才使用普通js。

注意：类名的重命名是为了让我可以将伪列表项变成其图形表示。

拖放的Javascript：

function drag(event){
    var targetClassName = event.target.className;
    event.dataTransfer.setData('class-name', event.target.className);
}

function drop(event){
    event.preventDefault();
    className = event.dataTransfer.getData('class-name');
    event.target.style.border = "";

    if(className == "aircraftFrame") {
        event.target.className = "AC";
    }

    if(className == "soLongRange") {
        event.target.className = "SOLR";
    }

    if(className == "soShortRange") {
        event.target.className = "SO";
    }

    if(className == "hellfire") {
        event.target.className = "AGM";
    }

    if(className == "railgun") {
        event.target.className = "RG";
    }

    if(className == "positron") {
        event.target.className = "PSN";
    }

    if(className == "accelerator") {
        event.target.className = "PACC";
    }
}

还有html的示例...

    <div class="content">
            <div class='hellfire' draggable="true" id="AGM" ondrop="drop(event)" ondragover="event.preventDefault();" ondragstart="drag(event);"><p><img src="images/Lock.svg" class="icon"> AGM 114 (Hellfire)</p></div>
            <div class='railgun' draggable="true" id="RailGun" ondrop="drop(event)" ondragover="event.preventDefault();" ondragstart="drag(event);"><p><img src="images/Lock.svg" class="icon"> Railgun</p></div>
            <div class='accelerator' draggable="true" id="Particle" ondrop="drop(event)" ondragover="event.preventDefault();" ondragstart="drag(event);"><p><img src="images/Lock.svg" class="icon"> Particle Accelerator</p></div>
            <div class='positron' draggable="true" id="Positron" ondrop="drop(event)" ondragover="event.preventDefault();" ondragstart="drag(event);"><p><img src="images/Lock.svg" class="icon"> Positron Ejector</p></div>
    </div>

防止具有相同拖动目标的放置目标被覆盖类

0 个答案: