Отключение перетаскивания 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()

Ответы на вопрос(4)

Ваш ответ на вопрос