如示例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:
我得到的是这个3x2网格:
答案 0 :(得分:0)
如何使用jqueryUI - 使用固定高度<div>
网格和包装元素
http://jqueryui.com/sortable/#display-grid
以下是2X2网格的示例
http://jsfiddle.net/JavaKB/CsFpn/1/