0

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

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

containment: '.body',

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

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

snipetで確認が出来ます。

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

(($) => {
   $('.draggable').draggable({
     containment: '.body'
   });
})(jQuery);
.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;
}
<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>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。