jquery draggableで複数のdivの中だけを移動する方法がわかりません


jquery uiのdraggableでbodyのdivの中だけをdrag出来るようにしたいです。

containmentを使うと良いみたいですが、

[code]

    containment: '.body',
    
[/code]

にすると、一つの.bodyの中でしかdrag出来ません。

全部の.bodyの中、つまり.headerを除いた全体で移動がしたいのですが、方法がわかりません。

snipetで確認が出来ます。

分かる方が居たらよろしくお願いします。

[code]

    (($) => {
       $('.draggable').draggable({
         containment: '.body'
       });
    })(jQuery);
[/code]

[code]

    .top {
      display: grid;
      grid-template:
        ". . . ." 3rem
        ".   body   body   body" 3rem
        ".   body   body   body" 3rem
        ".   body   body   body" 3rem / 1fr 1fr 1fr 1fr;
    }
    
    * {
      border: 1px solid red;
    }
    
    .draggable {
      position: absolute;
    }
[/code]

[code]

    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <div class="top">
      <div class="header">
        header
      </div>
      <div class="header">
        header
      </div>
      <div class="header">
        header
      </div>
      <div class="header">
        header
      </div>
      
      <div class="header">
        header
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
      
      <div class="header">
        header
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
      
      <div class="header">
        header
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
      <div class="body">
        body
      </div>
    </div>
    
    <div class="draggable">
      draggable
    </div>
[/code]

