<p id="drag" draggable="true">드래그해보세요.</p>
<br>
<div id="drop">여기에 드롭하세요</p>
document.getElementById('drag').ondragstart = function(e) {
  console.log('드래그 시작');
  e.dataTransfer.setData('data', this.innerHTML);
  e.dataTransfer.dropEffect = 'copy';
};
var drop = document.getElementById('drop');
drop.ondragover = function(e) {
  e.preventDefault(); // 필수
  console.log('무언가 위에 올려져 있습니다');
  e.dataTransfer.dropEffect = 'move';
};
drop.ondrop = function(e) {
  console.log('무언가 드롭되었습니다.');
  alert(e.dataTransfer.getData('data'));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.