Почему у trello__sprint записывается undefined при перенесении картинки в .circle?

Question

ahillesius @ahillesius

Почему у trello__sprint записывается undefined при перенесении картинки в .circle?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="trello">
		<div class="trello__header">
			<div class="input_container"><input type="text" class="trello__inp"> <button class="trello__btn">Add task</button></div>
			<div id = 'avatars'>
				<img src="av1.png" alt="" draggable = "true">
				<img src="av2.png" alt=""draggable = "true">
				<img src="av3.png" alt=""draggable = "true">
			</div>
		</div>
		<div class="trello__body">
			<div class="trello__sprint">

				<div id="sprint">Sprint</div>
				<div class="trello__task" draggable = "true" contenteditable ='true'>
					<div class="circle"></div>
					<span class="trello__taskText">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Enim magnam </span>
					<span class="trello__removeTaskBtn">x </span>
				</div>
			</div>
			<div class="trello__progress">
				<div id="progress">In progress</div>
			</div>
			<div class="trello__review">
				<div id="review">Review</div>
			</div>
			<div class="trello__done">
				<div id="done"> Done </div>
			</div>

		</div>
	</div>
	<script src="js/main.js"></script>
</body>
</html>

const poligons = document.querySelectorAll('.trello__body>div');
let trelloTask = document.querySelector('.trello__task');
const trelloBtn = document.querySelector('.trello__btn');
const trelloInp = document.querySelector('.trello__inp');
const trelloSprint = document.querySelector('.trello__sprint');
const avatars = document.querySelectorAll('#avatars>img');
const trelloRemoveTaskBtn = document.querySelector('.trello__removeTaskBtn')
let newTrelloTask;
let circleFirst = document.querySelector('.circle');

function allowDrop(e){
	e.preventDefault();
}
trelloTask.addEventListener('dragstart',function(e){
			newTrelloTask = e.target; // this
		})

function dropTask(){
	this.append(newTrelloTask);
}
let dragElement;
function dropAvatar () {
	this.append(dragElement);
	console.log(dragElement);
}

avatars.forEach(function(el) {
	el.addEventListener('dragstart', function(e){
		dragElement = e.target;
		el.classList.add('over');
	})
})

poligons.forEach(function(el){
	el.addEventListener('dragover', allowDrop);
	el.addEventListener('drop',dropTask); 
})

trelloRemoveTaskBtn.addEventListener('click',removeTask);
trelloBtn.addEventListener('click',addTask);


function addTask(){
	if(trelloInp.value){
		const trelloTask = document.createElement('div');
		trelloTask.addEventListener('dragstart',function(e){
			console.log(e);
			newTrelloTask = e.target; // this
		})
		trelloTask.classList.add('trello__task');
		trelloTask.setAttribute('draggable', 'true');

		const trelloTaskText = document.createElement('span');
		trelloTaskText.classList.add('trello__taskText');
		trelloTaskText.innerText = trelloInp.value;

		const circle = document.createElement('div');
		circle.classList.add('circle');

		const trelloRemoveTaskBtn = document.createElement('span');
		trelloRemoveTaskBtn.innerText = 'x';

		trelloTaskText.setAttribute('contenteditable', 'true')
		trelloRemoveTaskBtn.classList.add('trello__removeTaskBtn');
		trelloTask.appendChild(trelloRemoveTaskBtn);
		trelloTask.appendChild(circle);
		trelloTask.appendChild(trelloTaskText);
		trelloRemoveTaskBtn.addEventListener('click',removeTask)

		trelloSprint.appendChild(trelloTask);
		trelloInp.value = '';

		circle.addEventListener('dragover', allowDrop);
		circle.addEventListener('drop',dropAvatar);
	}
};
	circleFirst.addEventListener('dragover', allowDrop);
	circleFirst.addEventListener('drop',dropAvatar);


function removeTask(){
	this.parentElement.remove();
}