Question

如示例here所示，我希望设计中的列仅限于2个元素或810px的高度。这是我的代码：

$(".column").sortable({
    connectWith: ".column",
    start: function (e, ui) {
        ui.placeholder.height(ui.item.height());
    }
});

这是我的HTML（ASP），它考虑了面板，这些面板应该按照需要在2x2网格中与每个切换位置对齐：

<div id="charts">
    <div class="column">
        <asp:Panel ID="Panel1" runat="server" Height="405px" Width="450px">
            <div id="column" class="chart">
                <div class="download-image">
                    <asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:Button ID="Button1" runat="server" Text="Download Image" OnClick="DownloadColumnChart" OnClientClick="getSvgContent(this, 'RadHtmlChart1'); return false;" />
                </div>
                <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" DataSourceID="SqlDataSource_TotalSales">
                    <PlotArea>
                        <Series>
                            <telerik:ColumnSeries DataFieldY="TotalSales">
                                <LabelsAppearance DataFormatString="{0:C}" Visible="false" />
                                <TooltipsAppearance DataFormatString="{0:C}" />
                            </telerik:ColumnSeries>
                        </Series>
                        <XAxis DataLabelsField="SubmitDate" MajorTickType="Outside" Step="1" MinorTickType="None">
                            <MinorGridLines Visible="false" />
                            <MajorGridLines Visible="false" />
                            <LabelsAppearance RotationAngle="-70" DataFormatString="{0}">
                            </LabelsAppearance>
                        </XAxis>
                        <YAxis>
                            <LabelsAppearance DataFormatString="${0}">
                            </LabelsAppearance>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false">
                        </Appearance>
                    </Legend>
                </telerik:RadHtmlChart>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" Height="405px" Width="450px">
            <div id="bar" class="chart">
                <div class="download-image">
                    <asp:DropDownList ID="DropDownList3" runat="server">
                        <asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:Button ID="Button3" runat="server" Text="Download Image" OnClick="DownloadBarChart" OnClientClick="getSvgContent(this, 'RadHtmlChart3'); return false;" />
                </div>
                <telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" DataSourceID="SqlDataSource_TotalSales">
                    <PlotArea>
                        <Series>
                            <telerik:BarSeries DataFieldY="TotalSales">
                                <LabelsAppearance DataFormatString="{0:C}" Visible="false" />
                                <TooltipsAppearance DataFormatString="{0:C}" />
                            </telerik:BarSeries>
                        </Series>
                        <XAxis DataLabelsField="SubmitDate" MajorTickType="None" MinorTickType="None">
                            <MinorGridLines Visible="false" />
                            <MajorGridLines Visible="false" />
                            <LabelsAppearance RotationAngle="0" DataFormatString="{0}">
                            </LabelsAppearance>
                        </XAxis>
                        <YAxis>
                            <LabelsAppearance DataFormatString="${0}">
                            </LabelsAppearance>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false">
                        </Appearance>
                    </Legend>
                </telerik:RadHtmlChart>
            </div>
        </asp:Panel>
    </div>
    <div class="column">
        <asp:Panel ID="Panel2" runat="server" Height="405px" Width="450px">
            <div id="pie" class="chart">
                <div class="download-image">
                    <asp:DropDownList ID="DropDownList2" runat="server">
                        <asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:Button ID="Button2" runat="server" Text="Download Image" OnClick="DownloadPieChart" OnClientClick="getSvgContent(this, 'RadHtmlChart2'); return false;" />
                </div>
                <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server"
                 Transitions="true" DataSourceID="SqlDataSource_TotalSales">
                    <PlotArea>
                        <Series>
                            <telerik:PieSeries DataFieldY="TotalSales" StartAngle="90">
                                <LabelsAppearance ClientTemplate="#=dataItem.SubmitDate#" Position="Circle" 
                                DataFormatString="{0:C}">
                                </LabelsAppearance>
                                <TooltipsAppearance DataFormatString="{0:C}" />
                            </telerik:PieSeries>
                        </Series>
                        <XAxis DataLabelsField="SubmitDate" Visible="true">
                        </XAxis>
                        <YAxis>
                            <LabelsAppearance DataFormatString="{0:C}">
                            </LabelsAppearance>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false">
                        </Appearance>
                    </Legend>
                </telerik:RadHtmlChart>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel4" runat="server" Height="405px" Width="450px">
            <div id="line" class="chart">
                <div class="download-image">
                    <asp:DropDownList ID="DropDownList4" runat="server">
                        <asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:Button ID="Button4" runat="server" Text="Download Image" OnClick="DownloadLineChart" OnClientClick="getSvgContent(this, 'RadHtmlChart4'); return false;" />
                </div>
                <telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" DataSourceID="SqlDataSource_TotalSales">
                    <PlotArea>
                        <Series>
                            <telerik:LineSeries DataFieldY="TotalSales">
                                <LabelsAppearance DataFormatString="{0:C}" Visible="false" />
                                <TooltipsAppearance DataFormatString="{0:C}" />
                            </telerik:LineSeries>
                        </Series>
                        <XAxis DataLabelsField="SubmitDate" MajorTickType="Outside" MinorTickType="None">
                            <MinorGridLines Visible="false" />
                            <MajorGridLines Visible="false" />
                            <LabelsAppearance RotationAngle="-70" DataFormatString="{0}">
                            </LabelsAppearance>
                        </XAxis>
                        <YAxis>
                            <LabelsAppearance DataFormatString="${0}">
                            </LabelsAppearance>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false">
                        </Appearance>
                    </Legend>
                </telerik:RadHtmlChart>
            </div>
        </asp:Panel>
    </div>
</div>

要清楚，我想要的是这个图表网格固定在2x2：

Correct 2x2 grid

我得到的是这个3x2网格：

Incorrect 3x2 grid

Answer 1

如何使用jqueryUI - 使用固定高度<div>网格和包装元素

http://jqueryui.com/sortable/#display-grid

以下是2X2网格的示例

http://jsfiddle.net/JavaKB/CsFpn/1/

jQuery Sortable：限制列高度

1 个答案: