Почему в моем коде dropEffect = "move" скопируйте и вставьте элемент вместо его перемещения - PullRequest
Новая
       11

Почему в моем коде dropEffect = "move" скопируйте и вставьте элемент вместо его перемещения

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

Я пытаюсь создать систему перетаскивания в JS, но у меня есть небольшая проблема, когда я перетаскиваю свой элемент в зону перетаскивания, элемент находится в зоне перетаскивания, но мой старый элемент все еще находится внеDropzone, и я не могу понять, почему это происходит.

Я пытаюсь следовать документации по API перетаскивания на MDN.Также попробуйте Google, но не найти ответ.

мой HTML 

<div id="dropzone">

</div>

<div class="note" draggable="true">

</div>

<style>
#dropzone {
  width: 200px;
  min-height: 200px;
  border: 2px solid black;
  padding: 2rem;
}


.note {
  width: 200px;
  height: 200px;
  background: yellow;
}
</style>

мой JS 

var dropzone = document.getElementById('dropzone');
var note = document.querySelectorAll('.note');

note.forEach(function() {
  addEventListener('dragstart', dragStart);
})

function dragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.className);
  e.dataTransfer.effectAllowed = "move";
}

dropzone.addEventListener('dragover', dragOver);
dropzone.addEventListener('drop', drop);

function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

function drop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text/plain');
  var create = document.createElement('div');
  create.classList.add(data);
  e.target.appendChild(create);
}
...