多個Kendo窗口重疊，但文本div不重疊

Question

我有一個要求佈置多個Kendo窗口（4行，然後下一行等）。該窗口在關閉時應使其右側的窗口向左移動。

我使用的引導3.

這適用於6個div的放置在相同的方式完美的罰款。下面的代碼中的刪除按鈕一次刪除一個div，div移位。

問題的的div內的窗口：

1）第五窗口重疊第一窗口而它應該被放置在第二排。

2）使用關閉按鈕關閉時，右側窗口不會移動。

我看到實際的窗口控件是在類別爲k-widget k-window的html的底部創建的。 行類中的div只包含jQuery函數來顯示窗口。

當我關閉窗戶時，窗戶破壞，但其他窗戶左側或頂部的屬性不會改變，這就是爲什麼他們留在原地而不是左移。

代碼片段：

<div class="row" id="partialWindows1"> 
    <div id="hello" class="col-md-3"> @(Html.Kendo().Window() 
.Name("win1") 
    .Title("Window1") 
    .Content(@<text> 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .Events(e=> e.Deactivate("win_deac")) 
     ) 
</div> 
    <div class="col-md-3">@(Html.Kendo().Window() 
.Name("win2") 
    .Title("Window1") 
    .Content(@<text> 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .Events(e=> e.Deactivate("win_deac")) 
     )</div> 
    <div class="col-md-3">@(Html.Kendo().Window() 
.Name("win3") 
    .Title("Window1") 
    .Content(@<text> 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .Events(e=> e.Deactivate("win_deac")) 
     )</div> 
    <div class="col-md-3">@(Html.Kendo().Window() 
.Name("win4") 
    .Title("Window1") 
    .Content(@<text> 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .Events(e=> e.Deactivate("win_deac")) 
     )</div> 
    <div class="col-md-3">@(Html.Kendo().Window() 
.Name("win5") 
    .Title("Window1") 
    .Content(@<text> 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .Events(e=> e.Deactivate("win_deac")) 
     )</div> 
</div> 

<br/> 
<br/> 

<div id="divDivs" class="row" style="margin-top: 100px"> 
    <div class="col-md-3">div1</div> 
    <div class="col-md-3">div2</div> 
    <div class="col-md-3">div3</div> 
    <div class="col-md-3">div4</div> 
    <div class="col-md-3">div5</div> 
    <div class="col-md-3">div6</div> 
</div> 

<button id="btnDelete">Delete</button> 

<script> 
    $(document).ready(function() { 
     $('#btnDelete').on('click', function() { 
      if ($('#divDivs div').length > 0) 
       $('#divDivs div')[0].remove(); 
     }); 
    }); 

    function win_deac() { 
     this.destroy(); 
    } 
</script> 

我應該如何解決這個問題？感謝您的期待...

Answer 1

下面是我知道在窗口小部件上有一個appendTo方法後，如何解決此問題。當窗口被刪除時，我還添加了一個很好的動畫。

<div class="row"> 
    <div id="div1" class="col-md-3 atl-win"> @(Html.Kendo().Window() 
.Name("win1") 
    .Title("Window1") 
    .Content(@<text>win1 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .AppendTo("#div1") 
    .Events(e=> e.Deactivate("win_deac").Close("win_close")) 
     ) 
</div> 
    <div id="div2" class="col-md-3 atl-win">@(Html.Kendo().Window() 
.Name("win2") 
    .Title("Window2") 
    .Content(@<text>win2 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .AppendTo("#div2") 
    .Events(e=> e.Deactivate("win_deac").Close("win_close")) 
     )</div> 
    <div id="div3" class="col-md-3 atl-win">@(Html.Kendo().Window() 
.Name("win3") 
    .Title("Window3") 
    .Content(@<text>win3 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .AppendTo("#div3") 
    .Events(e=> e.Deactivate("win_deac").Close("win_close")) 
     )</div> 
    <div id="div4" class="col-md-3 atl-win">@(Html.Kendo().Window() 
.Name("win4") 
    .Title("Window4") 
    .Content(@<text>win4 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .AppendTo("#div4") 
    .Events(e=> e.Deactivate("win_deac").Close("win_close")) 
     )</div> 
    <div id="div5" class="col-md-3 atl-win">@(Html.Kendo().Window() 
.Name("win5") 
    .Title("Window5") 
    .Content(@<text>win5 
    </text>) 
    .Draggable() 
    .Width(150) 
    .Height(60) 
    .AppendTo("#div5") 
    .Events(e=> e.Deactivate("win_deac").Close("win_close")) 
     )</div> 
</div> 

<br/> 
<br/> 

<div id="divDivs" class="row" style="margin-top: 100px"> 
    <div class="col-md-3">div1</div> 
    <div class="col-md-3">div2</div> 
    <div class="col-md-3">div3</div> 
    <div class="col-md-3">div4</div> 
    <div class="col-md-3">div5</div> 
    <div class="col-md-3">div6</div> 
</div> 

<button id="btnDelete">Delete</button> 

<script> 
    $(document).ready(function() { 
     $('#btnDelete').on('click', function() { 
      if ($('#divDivs div').length > 0) 
       $('#divDivs div')[0].remove(); 
     }); 
    }); 

    function win_deac() { 
     this.destroy(); 
    } 

    function win_close(e) { 
     var $divRem = $(e.sender.options.appendTo); 
     $divRem.hide(1000, function() { $divRem.remove(); }); 
    } 
</script> 

我希望有人可以得到一些答案的答案。