Сделать несколько элементов видимыми при падении - PullRequest
Новая
       11

Сделать несколько элементов видимыми при падении

0 голосов
/ 27 декабря 2018

У меня есть код, в котором три изображения src с идентификатором drag1, drag2, drag3 каждое можно перетащить и сбросить до div1 ..

Моя проблема заключается в сбрасываниивторое и третье изображение не видно в # div1

Как сделать второе и третье изображение видимым по капле? 

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">

1 Ответ

0 голосов
/ 27 декабря 2018

На самом деле нет проблем с вашим реальным кодом, и он ведет себя так же, как с 3 images.

Проблема в том, что ваш div имеет только 70px как height, поэтому только первое изображение может быть видимым, а вторые два элемента находятся внутри div, но не отображаются на экране, выэто можно исправить, изменив div height или сделав его растянутым с содержимым.

Демонстрация: 

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

}
#div1 {
  width: 350px;
  height: 370px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">
...