2010-10-04 43 views
2

我從上週五開始尋找這個,找不到任何解決方案。有一件事我想過並嘗試了好幾次,首先是構建函數,其中包含那個實際上應該被排除在其他列表之外的所有項目都可以被移動到列表中,並且後來建立另一個功能,所有項目都準備好也被移動到其他列表中,但某個項目被排除在外。jquery可排序 - 排除列表中的單個項目與其他列表連接,同時可排序在其自己的列表中

但似乎你不能用jquery寫一個列表的兩個函數,或者它可能嗎?無論如何,我的要求實際上在標題中被描述得最好,但直到現在我還沒有得到任何解決方案。有沒有人有一個想法如何解決這個問題?

問候,Maschek

編輯:

下面是一些代碼:

$("#tx-sortable2").sortable({  
           items: \'li:not(.tx-header)\', 
           connectWith: \'#tx-sortable2,#tx-sortable3\',    
           helper: \'clone\', 
           opacity: 0.6, 

           forceHelperSize: true, 
           placeholder: \'tx-highlight\', 
           revert: \'invalid\', 
           update: function() { 
            var order = $(this).sortable("serialize") + \'&action=bla=blubb\';          
            $.ajax({ 
             url: \'index.php?bla=blubb\', 
             type: \'POST\', 
             data: order, 
             timeout: 50000, 
             beforeSend: function() { 
             $("#tx-response").show(); 
             $("#tx-response").fadeOut(2000); 
            } 
           });      
          }    

在這個例子#TX-sortable2內的所有鋰項目可以移動到列表# tx-sortable3和列表#tx-sortable2本身,這就是connectWith的意思。再次,我的問題是,我如何在自己的列表(這裏是#tx-sortable2)中對一個單獨的li項目進行排序,但是防止它被拖入另一個列表中?

+0

我不明白的問題 - 「與其他名單被連接並且是在自己的列表排序排除項目」。不清楚你想要什麼或問題是什麼,例如「與...連接」是什麼意思? – NimChimpsky 2010-10-04 10:49:35

回答

1

我想你可以使用jQuery UI自己的選項Axis。它指定了物品可以移動的方向。因此,如果您的其他列表位於右側或左側,則可以將軸選項設置爲'y',因此不能水平移動它們。然後,您將擁有一個列表,您可以在THAT列表中對這些項目進行排序,但無法將其與其他列表連接起來。

+0

您只能爲整個列表指定軸。如何更改列表中單個項目的座標軸? – 2017-12-27 15:03:22

3

當排除的項目移動到連接列表時,您可以觸發取消事件。 只給排除的項目一些特殊的屬性(類)。

東西在線。

HTML

<ul id="tx-sortable2"> 
    <li>Element2_1</li> 
    <li class="excluded">Element2_2</li> 
    <li>Element2_3</li> 
    <li>Element2_4</li> 
</ul> 

<ul id="tx-sortable3"> 
    <li>Element3_1</li> 
    <li>Element3_2</li> 
    <li>Element3_3</li> 
    <li>Element3_4</li> 
</ul> 

JS

$("#tx-sortable2").sortable({ 
    connectWith: '#tx-sortable3', 
    over: function(){ 
     if($(ui.item.hasClass('excluded')){ 
      $(ui.sender).sortable('cancel'); 
     } 
}); 
相關問題