Ошибка в коде, DragAndDrop

Question

Ошибка, скорее всего, заключается в переборе элементов source, но не могу её решить. (стили с elem прописаны пока для удобства) :

window.onload = function() {
  var source = document.getElementsByClassName('drag');
  for (var i = 0; i < source.length; i++) {
    source = source[i];
  }

  source.addEventListener('dragstart', function(evt) {
    this.style.border = "";
    evt.dataTransfer.effectAllowed = "move";
    evt.dataTransfer.setData("text", evt.target.id);
  }, false);

  source.addEventListener("dragend", function(evt) {
    this.style.border = "";
  }, false);

  var target = document.getElementById("target");

  target.addEventListener("dragenter", function(evt) {
    this.style.border = "3px solid red";
  }, false);

  target.addEventListener("dragleave", function(evt) {
    this.style.border = "";
  }, false);

  target.addEventListener("dragover", function(evt) {
    if (evt.preventDefault) evt.preventDefault();
    return false;
  }, false);

  target.addEventListener("drop", function(evt) {
    if (evt.preventDefault) evt.preventDefault();
    this.style.border = "";
    console.log('drop');
    var item = evt.dataTransfer.getData("Text");
    var elem = document.getElementById(item);

    this.append(elem);
    elem.style.fontSize = '25px';
    elem.style.textAlign = 'center';
    elem.style.float = 'right';
    elem.innerHTML = '1';
    elem.style.padding = '5px'
    elem.style.width = '30px';
    elem.style.height = '30px';

    return false;
  }, false);
}

#source1 {
  background-color: rgb(228, 195, 169);
}

#source2 {
  background-color: rgb(136, 205, 226);
}

#source3 {
  background-color: rgb(126, 223, 169);
}

.drag {
  float: left;
  width: 80px;
  height: 50px;
  cursor: move;
  padding: 50px;
  font-size: large;
  margin: 10px;
}

h1 {
  padding-bottom: 100px;
  color: rgb(65, 181, 75);
  font: sans-serif;
  font-size: 34pt;
  text-align: center;
}

#target {
  background-image: url(https://kilowattik.com.ua/media/wysiwyg/empty_cart.png);
  background-size: cover;
  width: 200px;
  height: 200px;
  padding: 5px;
  float: right;
  margin-right: 100px;
}

<body>
  <h1>Shopping is pleasure</h1>
  <div class="drag " id="source1" draggable="true">Face cream</div>
  <div class="drag " id="source2" draggable="true">Shampoo</div>
  <div class="drag " id="source3" draggable="true">Gel for shower</div>

  <div id="target"></div>
</body>

Answer 1

Так работает вроде, только раскачивается долго у меня, надо секунд 30 подождать). Исправил две вещи:

Объявил глобальную dragged и в событии drag напрямую elem присваиваю из нее.
Source это коллекция, надо назначать слушатель на каждый элемент в отдельности.
Добавил рамочку target чтобы видно было куда целишься)

window.onload = function() {
  var dragged;
  var source = document.getElementsByClassName('drag');
  [...source].forEach( source => {
  source.addEventListener('dragstart', function(evt) {
    this.style.border = "";
    dragged = this;
    evt.dataTransfer.effectAllowed = "move";
    evt.dataTransfer.setData("text", evt.target.id);
  }, false);

  source.addEventListener("dragend", function(evt) {
    this.style.border = "";
  }, false);
  })

  

  var target = document.getElementById("target");

  target.addEventListener("dragenter", function(evt) {
    this.style.border = "3px solid red";
  }, false);

  target.addEventListener("dragleave", function(evt) {
    this.style.border = "";
  }, false);

  target.addEventListener("dragover", function(evt) {
    if (evt.preventDefault) evt.preventDefault();
    return false;
  }, false);

  target.addEventListener("drop", function(evt) {
    if (evt.preventDefault) evt.preventDefault();
    this.style.border = "";

    var elem = dragged;

    this.append(elem);
    elem.style.fontSize = '25px';
    elem.style.textAlign = 'center';
    elem.style.float = 'right';
    elem.innerHTML = '1';
    elem.style.padding = '5px'
    elem.style.width = '30px';
    elem.style.height = '30px';

    return false;
  }, false);
}

#source1 {
  background-color: rgb(228, 195, 169);
}

#source2 {
  background-color: rgb(136, 205, 226);
}

#source3 {
  background-color: rgb(126, 223, 169);
}

.drag {
  float: left;
  width: 80px;
  height: 50px;
  cursor: move;
  padding: 50px;
  font-size: large;
  margin: 10px;
}

h1 {
  padding-bottom: 100px;
  color: rgb(65, 181, 75);
  font: sans-serif;
  font-size: 34pt;
  text-align: center;
}

#target {
  background-image: url(https://kilowattik.com.ua/media/wysiwyg/empty_cart.png);
  background-size: cover;
  width: 200px;
  height: 200px;
  padding: 5px;
  float: right;
  margin-right: 100px;
  border: 1px solid red;
}

  <h1>Shopping is pleasure</h1>
  <div class="drag " id="source1" draggable="true">Face cream</div>
  <div class="drag " id="source2" draggable="true">Shampoo</div>
  <div class="drag " id="source3" draggable="true">Gel for shower</div>

  <div class="target" id="target"></div>

БЛОГ НА HUSL

Ошибка в коде, DragAndDrop

Ответы (1 шт):