Desativar o arraste do jQuery ao rolar o conteúdo do item arrastável

Normalmente, eu não faço esse tipo de pergunta / resposta, mas achei que faria isso, já que essa pergunta foi feita mais de 20 vezes, e nenhuma resposta realmente funciona. Em resumo, o problema é que, se você tiver conteúdo rolável overflow: auto; em qualquer lugar dentro de um item jQuery arrastável, quando você clica e arrasta o recipiente arrastável principal da barra de rolagem, arrastando-o. Então, passei algum tempo trabalhando em uma solução.

Aqui está um exemplo de algum html que apresentaria esse problema:

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

A maneira típica de inicializar um elemento para ser arrastável é algo como isto:

$(".draggable").draggable()

questionAnswers(8)

yourAnswerToTheQuestion