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>