Dont click draggable element in Android Chrome

I have draggable element with button. But button don't work on Android Chrome.

<div id="draggable" class="ui-widget-content">
  <p>Draggable Div</p>
  <div id="clickAction">Click Me! (I should change colour)</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( "#draggable" ).draggable();
  $( "#draggable" ).click(function() {
    console.log('clicked!')
  });

  $( "#clickAction" ).click(function() {
    if($(this).hasClass('blue')){
       $(this).removeClass('blue');
    }else{
       $(this).addClass('blue');
    }
  });
</script>

https://codepen.io/macmadill/full/gbXmZG

The problem is that, drag event go first, and click event don't work

Please, help me. Sorry for my English.

from Dont click draggable element in Android Chrome