2010-04-16 47 views
0

我今天遇到了一個奇怪的問題: 我創建了一個可排序的div列表。每個div都有一個class =「class1」,而items被設置爲「class1」(見下面的簡化代碼)。每個div都有一個調用函數toggleLock的href鏈接。這個函數用class =「locked」替換那個div的class =「class1」。 例如:將成爲jquery可排序項目緩存? #sortable項目:'.class1'過濾器不工作時類動態更改

問題是:即使#sortable設置爲「make」只有class =「class1」的項目可排序,替換類仍然可以排序。似乎物品類在某個點上被緩存。

  1. 我試圖刷新#sortable($( '#排序')排序( 「refreshPosition」)和$( '#排序')排序( 「」);),但沒」工作。
  2. 我試過兩種方法來替換類:attr('class','lock')和removeClass(),然後addClass()。仍然是可排序的。
  3. 如果類未動態更改,但加載到DOM中,則不能按預期方式排序。

爲什麼不將class從class1替換爲locked會阻止div被排序?我錯過了什麼?

示例代碼:

<div id="sortable"> 
     <div class="class1" id="1"> 
      <div class="sortHandle">....</div> 
       <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R1">lock</a> 
       <p>This is item 1</p> 
     </div> 
     <div class="class1" id="2"> 
       <div class="sortHandle"></div> 
       <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R2">lock</a> 
       <p>This is item 2</p> 
     </div> 
     <div class="class1" id="3"> 
       <div class="sortHandle"></div> 
      <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R3">lock</a> 
       <p>This is item 3</p> 
     </div> 
</div> 

JS:

$(function() { 
    $("#sortable").sortable({ 
    items: '.class1', 
    handle: '.sortHandle', 
    cursor: 'move', 
    start: function(e,ui) { 
    el = e.target; 
    startPos = ui.item.prevAll().length+1; 
    }, 
    update: function(event, ui) { 
    data = $('.class1').sortable('toArray'); 
    newPos = ui.item.prevAll().length+1; 
    alert("position: "+startPos+"; newposition: "+newPos); 
    } 
    }).disableSelection(); 
    }); 

回答

0

改變類不會使項目不可排序作爲數據已連接到它。 最簡單的(不是最好的)方法是在使用.unbind()更改類時清除元素的處理程序() 最好是在更新類名後重新初始化可排序 - 這將確保您不會丟失性能隨着您不斷修改DOM而變化