与此处的示例一样，我希望我的设计中的列仅限于 2 个元素或 810 像素的高度。这是我的代码：
$(".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：
我得到的是一个 3x2 网格：
