Question

我需要布局多个Kendo窗口（连续4个然后是下一行，依此类推）。窗口关闭时，应该使窗口右侧的窗口向左移动。

我正在使用Bootstrap 3。

这种方式完全正常，6个div以相同的方式放置。下面代码中的删除按钮一次删除一个div并且div移位。

div中的窗口出现问题：

1）第五个窗口与第一个窗口重叠，而它应该放在第二个窗口。

2）使用关闭按钮关闭时，右侧窗口不会移动。

我看到实际的窗口控件是在html的底部用类k-widget k-window创建的。行类中的div只包含用于显示Window的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

在知道Window小部件上有一个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>

我希望有人可以得到一些帮助。

多个Kendo窗口重叠但文本div不重叠

1 个答案: