Всплывающее окно только с перетаскиваемым заголовком

Question

Я использую модальное всплывающее окно в угловых 5 и установить свойство draggable="true"

вот моя модель всплывающего окна

 <div **draggable="true"** class="modal" id="addServiceProduct" role="dialog" [ngStyle]="{'display':addServiceModal}">
<div class="modal-dialog modal-lg" id="draggable">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">
        {{this.editIndex>0?(this.viewProduct?'View Product':'Edit Product'):'Add Product'}} <span>-</span> {{serviceModel.Name}}
        <button class="close" type="button" data-dismiss="modal" aria-label="Close" (click)="closeAddProduct()">
          <span aria-hidden="true">×</span>
        </button>
      </h5>
    </div>
    <div class="modal-body">
      This is header

но я только хочу, чтобы заголовок был перетаскиваемым, а не все всплывающее окно, так что каковы возможные решения jquery .Draggable не работает в mytypescript. пожалуйста помоги