jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="dragYAxis">  
</div>

<div class="dragXAxis">  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

.dragXAxis{
  height: 20px;
  width: 20px;
  background: grey;
}

.dragYAxis{
  height: 20px;
  width: 20px;
  background: white;
}

JavaScript

/* 
Try this solution for your problem and see if it helps too:
$('.dragYAxis').draggable({
        axis: 'y',
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        } 
});*/

$(".dragYAxis").draggable({axis: 'y'});

$(".dragXAxis").draggable({axis: 'x'});

$(".dragYAxis").click(function(){
	alert();
});
$(".dragXAxis").click(function(){
	alert();
});