Предотвратить падение цели с той же целью перетаскивания из переопределенного класса - PullRequest
Новая
       7

Предотвратить падение цели с той же целью перетаскивания из переопределенного класса

0 голосов
/ 13 сентября 2018

Я создаю приложение (для целей тестирования пользовательского интерфейса), в котором есть элементы div из псевдосписка, которые можно поместить в определенные слоты.При добавлении идея состоит в том, чтобы просто изменить имя класса, чтобы имитировать внешний вид className перетаскиваемого элемента.Список оформлен так, чтобы отображаться в виде списка, но при удалении класс меняется на графический.

Проблема в том, что когда цель перетаскивания совпадает с целью перетаскивания, исходная цель перетаскивания заменяется графической версией.

Пожалуйста, помогите!О, нет вопросов, пожалуйста, ваниль 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>
...