I came across this drag and drop code pen

See the Pen Simple drag and drop with JavaScript by Sagar Patil (@sagarpatil) on CodePen.

This code does a good job of bringing several fundamnetal javascript concepts together. I ended up taking them apart and attempting to organize them to better internalize scripting the DOM. Because regardless of the tool, library, or framework used, they all will boil down to these pieces. helps to think about each little piece for what and why it is part of the universe 1. The value of variables var boxObj; Variables are an essential part of programming. They are a traffic light in the flow of information. When I was first learning about coding, I only thought of variables being assigned to very simple concepts and constructs. x = 'dave' kinda stuff. However, I'm beginning to discover that many times, the variable is grabbing a few more powerful sets of data. 1. it could be something that is currently unknown. A future dynamic value that will be provided by some future event. 2. it could be an object with it's own level of functions and methods. for example, the return value of calling a function that provides a new entity. By calling methods on a variable, it means that the program does not need to know which object it receives. It just needs that object to reveal a specific method signature 2. this var boxObj = this; this is a javascript keyword. The concept is also known as self. it is a way to refer to content made 3. situational behavior One of the things I had to learn was this idea of division of responsibility. Who's responsible for what. A computer can loop through things, but it doesn't automatically know when or why to do so. For loops are a way of discribing a situation to the computer that boils down to a count. You must set the starting point, the duration of time, and the steps it takes to get there, which is usually by one. for( var i=0; i // 3. visual management boxObj.className = boxObj.className + " is-dragged"; boxObj.className = boxObj.className.replace('is-dragged',''); a.className = 'show'; box.className = 'box'; dropZone.className = 'hide'; this.className = this.className.replace('dropover',''); this.className = this.className.replace('show','') + 'hide'; dropZone.className = dropZone.className.replace('hide','show'); // 4. conditional behavior if (e.stopPropagation) e.stopPropagation(); if( boxes[i].text == removeEl ){ if( boxes.length <= 0 ){ // 5. enhance behavior boxes[i].addEventListener('dragstart', dragStart, false); dropZone.addEventListener('dragenter', dragEnter, false); a.addEventListener('click',restartLink,false); // 6. query the DOM document.querySelectorAll('.box'); document.getElementsByClassName('drop-boxes')[0], document.getElementsByTagName('h3')[0], document.getElementById('dropzone'); h3.parentNode.removeChild(document.getElementsByTagName('h3')[0]); this.parentNode.removeChild(this); // 7. modify the DOM var a = document.createElement('a'), h3 = document.createElement('h3'), // 8. DOM h3.innerHTML = "Hooray! You removed all the boxes."; a.innerHTML = 'Click me to restart.'; box.text = 'Four'; // 9. DOM a.setAttribute('href','#'); a.setAttribute('id','restartLink'); box.setAttribute('draggable','true'); // 10. DOM boxWrapper[0].appendChild(h3); dropBoxes.appendChild(box); // 11. conditional behavior switch(i){ case 0: box.text = 'One'; break; case 1: box.text = 'Two'; break; case 2: box.text = 'Three'; break; // 12. change default behavior e.stopPropagation();