interact.js I want the dot to stop at the last element - html

Question

The dotted line follows well in the corresponding area.
If you select another element and move it, the dotted line is not moving along the last element.
I want the dot to stop at the last element
Any reference point you select will be stretched, and you will need to have a dotted line on it.
// global
let maxWidth = 200;
let maxHeight = 200;
let minWidth = Number.MAX_SAFE_INTEGER;
let recentTarget = 0;
let minRecentTarget = Number.MAX_SAFE_INTEGER;
var targetWrapper = document.querySelector(".check-box");
import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: false,
// keep the element within the area of it's parent
modifiers: [
interact.modifiers.restrictRect({
// restriction: '.check-group-wrap',
// endOnly: true
})
],
// enable autoScroll
autoScroll: true,
listeners: {
// call this function on every dragmove event
move: dragMoveListener,
// call this function on every dragend event
end: {},
}
})
function dragMoveListener(event) {
var target = event.target;
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
// 최대값 가진 target 찾기
if (parseFloat(target.getAttribute('data-x')) + 200 > minRecentTarget && parseFloat(target.getAttribute('data-x')) + 200 < recentTarget) {
minusRecent(x, y);
} else if (parseFloat(target.getAttribute('data-x')) + 200 == maxWidth) {
minusWidth(x, y);
} else if (parseFloat(target.getAttribute('data-x')) + 200 < minWidth && parseFloat(target.getAttribute('data-x')) + 200 > recentTarget) {
recentTarget = x + 200;
minRecentTarget = recentTarget - 5;
}
// translate the element
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
// update the width, height wrapper
resetPos(x, y);
}
function resetPos(x, y) {
if ((x + 200) > maxWidth) {
maxWidth = x + 200;
}
console.log(maxWidth + ',' + minWidth + ',' + recentTarget + ',' + minRecentTarget);
}
// target 이 최대값 타겟일 때
function minusWidth(x, y) {
maxWidth = x + 200;
minWidth = maxWidth - 1;
targetWrapper.style.width = (x + 200) + 'px';
console.log("최댓값 target");
}
function minusRecent(x, y) {
recentTarget = x + 200;
minRecentTarget = recentTarget - 100;
console.log("최솟값을 가진 target");
}
.check-group-wrap {
position: absolute;
top: 200px;
left: 10%;
}
.check-group {
position: relative;
}
.check-box {
position: absolute;
top: -9px;
left: -9px;
width: 200px;
height: 200px;
clear: both;
display: inline-block;
border: 5px dashed #000;
padding: 5px;
}
.check {
position: absolute;
width: 200px;
height: 200px;
background: red;
border: 1px solid blue;
}
<div class="check-group-wrap">
<div class="check-group">
<div class="check-box"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
</div>
</div>