JS foreach loop

by slawe

HTML

<ul id="mylist">
    <li data-order="1" class="dugme">text 3</li>
    <li data-order="2" class="dugme">text 4</li>
    <li data-order="3" class="dugme">text 2</li>
    <li data-order="4" class="dugme">text 1</li>
</ul>

JavaScript

var list = document.getElementById('mylist');


var buttons = document.querySelectorAll('.dugme');
// js foreach loop
for (var j in buttons) {
    buttons[j].addEventListener('click', function(e) {
        alert(this.dataset.order);
    }, false);
}
// end loop

//for(var i = 0; i < buttons.length; i++) {
//    alert(buttons[i].dataset.order);
//}

var items = list.childNodes;
var itemsArr = [];
console.log(itemsArr);
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}


drag('dugme');

function drag(class_name) {
     var cols_ = document.querySelectorAll('.'+class_name);
 var dragSrcEl_ = null;
 this.handleDragStart = function (e) {
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', this.innerHTML);
     dragSrcEl_ = this;
     this.classList.add('moving');
 };
 this.handleDragOver = function (e) {
     if (e.preventDefault) {
         e.preventDefault();
     }
     e.dataTransfer.dropEffect = 'move';
     return false;
 };
 this.handleDragEnter = function (e) {
     this.classList.add('over');
 };
 this.handleDragLeave = function (e) {
     this.classList.remove('over');
 };
 this.handleDrop = function (e) {
     if (e.stopPropagation) {
         e.stopPropagation();
     }
     if (dragSrcEl_ != this) {
         dragSrcEl_.innerHTML = this.innerHTML;
         this.innerHTML = e.dataTransfer.getData('text/html');
         var count = this.querySelector('.count');
         var newCount = parseInt(count.getAttribute('data-col-moves')) + 1;
         count.setAttribute('data-col-moves', newCount);
         count.textContent = 'moves: ' + newCount;
     }
     return false;
 };
 this.handleDragEnd = function (e) {
    ...