У меня есть три элемента div с классом .box и идентификаторами 10, 11, 12. У меня также есть .box002 с идентификатором 2.

При перетаскивании .box002 на любой из элементов .box элементы background-color и p удаляются. При перетаскивании я вызвал функцию nextslide() для отображения следующего слайда, если перетаскивание прошло успешно, но это не сработало.

Я хочу отобразить следующее изображение для перетаскивания, если перетаскивание прошло успешно.

Как я могу этого добиться?

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

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

var x = document.get

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById(data);

  el.parentNode.removeChild(el); // deleting drag item

  ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none

  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);

  nextslide();
}

var images = new Array();
images[0] = "https://picsum.photos/200/300/?random";
images[1] = "https://picsum.photos/200/300/?random";
images[2] = "https://picsum.photos/200/300/?random";
var currentpic = 0;
var lastpic = images.length - 1;

function nextslide() {
  if (currentpic == lastpic) {
    currentpic = 0;
    document.getElementById('slide').src = images[currentpic];
  } else {
    currentpic++;
    document.getElementById('slide').src = images[currentpic];
  }
}
.box {
  background-color: coral;
  width: 50%;
  height: 150px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #b3b300;
  margin: -2px;
  border-radius: 10%;
  background-color: #42e0fd;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 30%;
  padding-top: 2%;
  background-color: #333 2px;
  margin-bottom: 40%;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-left: 20%;
  margin-right: 30%;
}

p {
  font-size: 50px;
  color: #000000;
  text-align: center;
}
<div id="container">
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values">12</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values">21</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values">17</p>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2" onclick="nextslide()">
  <img src="https://picsum.photos/200/300/?random" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
</div>
0
dev maddy 11 Сен 2018 в 09:46

1 ответ

Лучший ответ

Спасибо за интересную и очень забавную задачу. Как правильно заметил Марио Васкес, вы удаляли изображение, а затем пытались ссылаться на него позже. Я смотрел на эту проблему с тех пор, как вы ее разместили, и не понял, что именно здесь что-то пошло не так. Однако после этого произошла еще одна ошибка с удалением вашего текста. То, что вы пытались удалить, firstElementChild на самом деле не узел, это элемент. Поэтому, когда вы вызывали команду removeChild, она не могла работать, потому что эта команда удаляет только узлы.

Чтобы исправить это, просто замените firstElementChild на firstChild. Это простое решение. Затем удалите el.parentNode.removeChild(el), чтобы решить проблему удаления изображения, прежде чем вы фактически вызовете его в своем коде.

Надеюсь это поможет. От вашего дружелюбного соседа, Интернет-парень

0
The Internet Guy 11 Сен 2018 в 10:12