2014-11-21 119 views
0

我有兩個列表可以在它們自己之間交換數據。我的其中一個列表是手風琴列表,您可以放置​​數據的空間,但也包含更多特定的手風琴,這些手風琴也允許將數據放入其中。我可以在表格之間拖放數據,甚至可以在手風琴內的手風琴中拖放數據,但這裏有個問題:我也可以拖動整個手風琴。手風琴內的手風琴;如何讓排序只拖動數據而不是手風琴本身

這裏是我的頁面的圖片:

Buggy sortable

我希望能夠在不包括子手風琴,它們含有的手風琴內部項目之間進行排序。這裏是我的jQuery函數:

<script> 
    $(function() { 
     $("#catalog").accordion({ collapsible: true, active: false, autoHeight: false }); 
     $(".subcatalog").accordion({ collapsible: true, active: false, autoHeight: false }); 

     $(".SpecificCatalog").sortable({ 
      connectWith: ".ui-widget-content, .GeneralCatalog", helper: "clone", 
      appendTo: "body", 
      stop: function (event, ui) { 
       //console.log((this).sortable('toArray', { attribute: 'value' })); 
       console.log(ui.item); 
       console.log(ui.item.text()); 
      } 
     }); 
     $(".ui-widget-content").sortable({ 
      connectWith: ".SpecificCatalog, .GeneralCatalog", helper: "clone", 
      appendTo: "body", 
      stop: function (event, ui) { 
       //console.log((this).sortable('toArray', { attribute: 'value' })); 
       console.log(ui.item); 
       console.log(ui.item.text()); 
      } 
     }); 
     $(".GeneralCatalog").sortable({ 
      connectWith: ".SpecificCatalog, .ui-widget-content", helper: "clone", 
      appendTo: "body", 
      stop: function (event, ui) { 
       //console.log((this).sortable('toArray', { attribute: 'value' })); 
       console.log(ui.item); 
       console.log(ui.item.text()); 
      } 
     }); 
    }); 
</script> 

這是我的HTML(包含邏輯來動態創建手風琴):

<div id="content"> 
    <div id="ListaCodigos"> 
     <h2 class="ui-widget-header">CodigoAgrupador</h2> 
     <div id="products"> 
      <div id="catalog"> 
       @foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores) 
       { 
        if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador))) 
        { 
         <h3><a href="#">@c.CodigoAgrupador - @c.NombreCuenta</a></h3> 
         <div> 
          <div class="subcatalog"> 
           @foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores) 
           { 
            if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1)) 
            { 
             <h4><a href="#">@c2.CodigoAgrupador - @c2.NombreCuenta</a></h4> 
             <div> 
              <div class="SpecificCatalog"> 
               <ol> 
                <li class="placeholder">Add your items here</li> 
               </ol> 
              </div> 
             </div> 
            } 
           } 
          </div> 
          <div class="GeneralCatalog"> 
           <ol> 
            <li class="placeholder">Add your items here</li> 
           </ol> 
          </div> 
         </div> 
        } 
       } 
      </div> 
     </div> 
    </div> 
    <div id="cart"> 
     <h2 class="ui-widget-header">Catalogos</h2> 
     <div class="ui-widget-content"> 
      @foreach (LedgerChartOfAccounts c in Model.Catalogos) 
      { 
       if (c.CodigoAgrupador == null) 
       { 
        <ul> 
         <li class="draggable">@c.GLAccountNumber - @c.GLAccountName </li> 
        </ul> 
       } 
      } 
     </div> 
    </div> 
    <div> 
     <footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer> 
    </div> 
</div> 

我已經嘗試過內的不同ID的包含,以增加更多的部門指定某些區域是可排序的,但我似乎仍然看不清楚。歡迎任何幫助。

編輯:我來,我需要爲了使這項工作,我希望它成爲的方式與我的div使用不同的分隔符/班的結論,但我被困在尋找一種方法來使事情仍然保持接近相同的格式,同時,按照手風琴的意圖進行工作。

回答

0

我終於得到了一個良好的夜間睡眠,並仔細查看代碼後,解決了它。事實證明這是這個類:「.ui-widget-content」一直是問題。

通過使用它作爲我的jquery函數連接,實際上我將任何手風琴內的所有東西都包含在內,這就是爲什麼即使我使用多個div類來分隔元素,我也有很多「bug」和「毛刺」。

在我的第二個列表中,我改變了我的div類從

<div id="ui-widget-content"> 

<div id="codigosAgrupadores> 

,並在jQuery的功能改變了代碼以反映更改。