Отключение перетаскивания jQuery при прокрутке содержимого перетаскиваемого элемента

Я обычно не задаю такого рода вопрос / ответ, но решил, что сделаю это, так как я видел этот вопрос, который задавали более 20 раз, а не единственный ответ действительно работает. Короче говоря, проблема в том, что если у вас есть прокручиваемый контент ( overflow: auto; где-нибудь внутри перетаскиваемого элемента jQuery, когда вы щелкаете и перетаскиваете полосу прокрутки, родительский перетаскиваемый контейнер перетаскивается вместе с ней. Итак, я потратил некоторое время на поиск решения.

Вот пример некоторого html, который представляет эту проблему:

<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>

Типичный способ инициализации элемента для перетаскивания выглядит примерно так:

$(".draggable").draggable()