Оператор Else в функции перетаскивания не работает в javascript - PullRequest
Новая
       2

Оператор Else в функции перетаскивания не работает в javascript

0 голосов
/ 27 марта 2020

Я хочу сделать условное перетаскивание, чтобы позволить удаляться только элементам с классом «droppable». Я добавил условие в функцию drop, но оператор «else», похоже, не работает. Оператор else должен отображать сообщение «повторить попытку», когда делается попытка удалить элемент без класса «droppable». Хотя оператор else, похоже, игнорируется, он всегда показывает сообщение «хорошая работа» и добавляет элемент, который не должен добавляться.

Вот код: 

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

function drag(ev) {
    ev.dataTransfer.setData("id", ev.target.id);
    ev.dataTransfer.setData("class", ev.target.className);
}

function drop(ev) {
    ev.preventDefault();
    var droppableElement = ev.dataTransfer.getData("id");
    var elementClass = ev.dataTransfer.getData("class");
    if ((elementClass = "droppable")) {
        ev.target.appendChild(document.getElementById(droppableElement));
        $("#goodjob")
            .fadeIn(500)
            .delay(500)
            .fadeOut(500);
    } else {
        $("#tryagain")
            .fadeIn(500)
            .delay(500)
            .fadeOut(500);
    }
}
#dropArea {
  width: 350px;
  padding: 10px 30px 30px 30px;
  border: 1px solid #aaaaaa;
}

#dropItems {
  margin-top: 20px;
  width: 350px;
  padding: 20px;
  border: 1px solid #aaaaaa;
}

.message {
  display: none;
}
.droppable {
  border: 1px solid #aaaaaa;
  padding: 10px;
}
.notdroppable {
  border: 1px solid #aaaaaa;
  padding: 10px;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <p id="goodjob" class="message">good job!</p>
    <p id="tryagain" class="message">tryagain!</p>
    <div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>drop here</p>
    </div>
    <div id="dropItems" ondrop="drop(event)" ondragover="allowDrop(event)">
      <p>items to drop</p>
      <p
        id="drag1"
        draggable="true"
        ondragstart="drag(event)"
        width="336"
        height="69"
        class="droppable"
      >
        droppable
      </p>

      <p
        id="drag1"
        draggable="true"
        ondragstart="drag(event)"
        width="336"
        height="69"
        class="notdroppable"
      >
        not droppable
      </p>
    </div>
  </body>
</html>

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

У вас было назначение = вместо сравнения ===

if(elementClass = "droppable")

должно быть

if(elementClass === "droppable")

Это работает, как и ожидалось 

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

function drag(ev) {
    ev.dataTransfer.setData("id", ev.target.id);
    ev.dataTransfer.setData("class", ev.target.className);
}

function drop(ev) {
    ev.preventDefault();
    var droppableElement = ev.dataTransfer.getData("id");
    console.log(droppableElement)
    var elementClass = ev.dataTransfer.getData("class");
    if ((elementClass === "droppable")) {
        ev.target.appendChild(document.getElementById(droppableElement));
        $("#goodjob")
            .fadeIn(500).append(droppableElement+": "+$("#"+droppableElement).text())
            .delay(500)
            .fadeOut(500);
    } else {
        $("#tryagain")
            .fadeIn(500)
            .delay(500)
            .fadeOut(500);
    }
}
#dropArea {
  width: 350px;
  padding: 10px 30px 30px 30px;
  border: 1px solid #aaaaaa;
}

#dropItems {
  margin-top: 20px;
  width: 350px;
  padding: 20px;
  border: 1px solid #aaaaaa;
}

.message {
  display: none;
}
.droppable {
  border: 1px solid #aaaaaa;
  padding: 10px;
}
.notdroppable {
  border: 1px solid #aaaaaa;
  padding: 10px;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <p id="goodjob" class="message">good job!</p>
    <p id="tryagain" class="message">tryagain!</p>
    <div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>drop here</p>
    </div>
    <div id="dropItems" ondrop="drop(event)" ondragover="allowDrop(event)">
      <p>items to drop</p>
      <p
        id="drag1"
        draggable="true"
        ondragstart="drag(event)"
        width="336"
        height="69"
        class="droppable"
      >
        droppable
      </p>

      <p
        id="drag1"
        draggable="true"
        ondragstart="drag(event)"
        width="336"
        height="69"
        class="notdroppable"
      >
        not droppable
      </p>
    </div>
  </body>
</html>
0 голосов
/ 27 марта 2020

Вы присваиваете в условии условие, а не сравнение. Это не false, поэтому код в выражении else никогда не выполняется.

...