2013-07-24 43 views
0

如示例here所示,我希望設計中的列僅限於2個元素或810px的高度。這是我的代碼:jQuery可排序:限制列高度

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

這是我的HTML(ASP)所希望佔這是爲了在2×2網格與各開關的地方對齊面板:

<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> 

要清楚,我要的是這個網格圖表留固定在2×2:

Correct 2x2 grid

什麼我得到是這樣的,一個3x2的網格:

Incorrect 3x2 grid

+0

那些餅圖顏色傷樣本我的眼睛。 – Tyrsius

+0

我同意 - 他們是默認設置。 –

回答

0

這樣如何使用jQueryUI的 - 電網和包裝用固定高度

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

這裏的<div>你的元素是2X2格

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