Draggable parent but not children

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="jquery-ui@*" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script data-require="jquery-ui@*" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    
    <p>Only the yellow area can be dragged. Children cannot drag the parent.</p>
    
    <div class="draggable">
      Text that can be selected
      
      <div>Cant drag draggable div</div>
      <textarea>Cant drag draggable div</textarea>
    </div>
    <script src="script.js"></script>
  </body>

</html>

$( ".draggable" ).draggable({
  start: function( event, ui ) {
    return event.originalEvent.target === this;
  }
});

.draggable {
    height:150px;
    width:250px;
    background-color: #FAFCA3;
}

.draggable div {
    margin-top:25px;
    width:100%;
    height:25px;
    background-color: #C0D9FC;
}