jQuery addClass example

Change class name on click in jQuery

HTML

<div class="inner">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>

SCSS

.inner {
  display: flex;
}
.test {
  background: red;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  &:nth-of-type(odd) {
    background: #000;
  }
}

JavaScript

var flag = 0;
var element = document.getElementsByClassName('test');
for(var i = 0;i < element.length;i++) {
element[i].addEventListener("mousedown", function(){
    flag = 0;
}, false);
element[i].addEventListener("mousemove", function(){
    flag = 1;
}, false);
element[i].addEventListener("mouseup", function(){
    if(flag === 0){
      console.log("click");
    }
    else if(flag === 1){
        console.log("drag");
    }
}, false);
}