Gridstack.js: 기본 그리드의 마지막 행에서 중첩된 그리드 상위 위젯을 제거하면 일부 기본 그리드의 위젯이 위치를 잃게 됩니다.

안녕하세요,

크기를 조정한 다음 상위 그리드에서 중첩 그리드를 제거할 때 이상한 동작이 발생했습니다.

두 개의 그리드가 있으며 그 중 하나는 다른 하나의 특정 항목에 중첩되어 있습니다.
일부 확인란을 선택/선택 취소하여 두 그리드에서 위젯을 추가 및 제거할 수 있습니다.
중첩 그리드에서 위젯을 제거할 때 상위 그리드 위젯의 크기를 항상 중첩 그리드만큼 최대로 조정합니다.
중첩 그리드가 비어 있으면 기본 그리드에서 제거해야 합니다.

실제로 하나의 특정 경우까지 모든 것이 잘 작동합니다.

1. 중첩 그리드는 기본 그리드의 마지막 행에 있습니다.
2. 중첩 그리드 크기 조정은 grid.resize()로 수행됩니다.
3. gridNested.removeWidget()을 사용하여 중첩 그리드에서 마지막 위젯을 제거합니다.
4. grid.removeWidget()을 사용하여 기본 그리드에서 중첩 그리드의 상위 위젯을 제거합니다.

이 단계가 완료되면 메인 그리드의 위젯 중 마지막 몇 개는 위치를 잃고 메인 그리드의 첫 번째 행으로 점프합니다. 모든 데이터 속성은 올바르게 유지되고 위치만 잘못됩니다(상단: 0, 하단: 그리드 높이 ). 중첩된 그리드를 다시 추가하면 모든 것이 올바른 위치로 돌아가지만 중첩된 그리드를 다시 제거한 후 이상한 일이 다시 발생합니다. 위의 단계를 한 번 수행한 다음 기본 그리드에서 위젯을 제거하려고 하면 해당 위젯도 첫 번째 행에 계속 떠 있다가 위젯을 추가한 후 다시 돌아갑니다. 중첩된 그리드를 마지막 행 이외의 다른 위치로 이동하면 잘못된 위치 변경이 발생하지 않습니다.

조사한 바와 같이, 두 그리드에 위젯을 추가하고 제거하는 것이 제대로 작동할 때까지 중첩 그리드의 상위 위젯 크기를 한 번 조정한 후에만 이상한 위치 변경이 발생하지 않습니다. 따라서 크기 조정이 문제를 망쳐 놓는 것 같습니다.

불행히도 이것은 더 큰 스크립트의 일부일 뿐이므로 작동하는 바이올린을 제공할 수 없으며 어떻게 보이는지 스크린샷만 첨부할 수 있습니다.

중첩(테두리) 그리드를 제거하기 전에:

중첩된 그리드를 제거한 후 다른 위젯 중 일부는 원래 위치에서 사라지고 기본 그리드의 첫 번째 행으로 떠다니는 반면, 해당 위치는 그리드의 올바른 위치(하단에 빈 공백)에 유지됩니다.

내 그리드는 다음 옵션으로 초기화됩니다.

grid = $('#grid.grid-stack').gridstack({
            width: 2,
            cellHeight: 84,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            height: 0
}).data('gridstack');        

gridNested = $('#gridNested.grid-stack').gridstack({
            width: 2,
            cellHeight: 80,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            float: true,
            height: 0
}).data('gridstack');

HTML 구조는 다음과 같습니다.

<div id="grid"  class="grid-stack grid-stack-2">
    <div id="element1" class="grid-stack-item element nestedblock" data-id="1" data-gs-width="2" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="2" data-gs-max-height="8" data-gs-y="0" data-gs-x="0">
         <div class="grid-stack-item-content">
             <div id="gridNested" class="grid-stack grid-stack-2">
                 <div id="element20" class="grid-stack-item element" data-id="20" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="0">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
                <div id="element21" class="grid-stack-item element" data-id="21" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="1">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="element2" class="grid-stack-item element" data-id="2" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="0">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
    <div id="element3" class="grid-stack-item element" data-id="3" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="1">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
</div>

다음과 같이 중첩 그리드의 상위 위젯 크기를 조정합니다.

function resizeNestedParentWidget(){
    var nestedParentWidget = $('#grid .grid-stack-item.nestedblock');
    var nestedGridHeight = parseInt($('#gridNested').attr('data-gs-current-height'));
    var nestedParentWidgetCurrentHeight = parseInt($(nestedParentWidget).attr('data-gs-height'));
    if(nestedGridHeight < nestedParentWidgetCurrentHeight){
        grid.resize(nestedParentWidget,null,nestedGridHeight);
    }
}

다음과 같이 중첩 그리드에서 위젯을 제거합니다.

![gridstack1](https://cloud.githubusercontent.com/assets/15252130/25693244/9b3f9ac8-30a8-11e7-9621-1c13cfe5acdb.jpg)

var elem = $('#grid #element'+elemID);
gridNested.removeWidget(elem);

if($('#gridNested .grid-stack-item').length < 1){
    grid.removeWidget($('#grid .grid-stack-item.nestedblock'));
} else {
    resizeNestedParentWidget();
}

내가 무엇을 잘못하고 있지? 내가 뭔가를 잘못 사용합니까? 아니면 버그를 찾았습니까? :)

미리 감사드립니다.