2011-05-14 74 views
0

我正在使用sortable來實現小部件的一維列表。它工作正常,但是當我撥打serialize將當前訂單發送回服務器時,會生成錯誤的訂單。JQueryUI問題可排序:序列化報告錯誤的順序

這裏是我的HTML,注意小部件ID的順序:13,10,11:

<div id="widget_columns"> 
    <ul id="column1" class="widget-column grid_8 alpha ui-sortable"> 
     <li id="widget_13" class="widget"> 
     (a widget!) 
     </li> 

     <li id="widget_10" class="widget"> 
     (a widget!) 
     </li> 

     <li id="widget_11" class="widget"> 
     (a widget!) 
     </li> 
    </ul> 
</div> 

名單與

$(#widget_columns').sortable({ 
     connectWith: $(#widget_columns'), 
     handle: settings.handleSelector, 
     placeholder: 'widget-placeholder', 
     forcePlaceholderSize: true, 
     revert: 300, 
     delay: 100, 
     opacity: 0.8, 
     containment: 'document', 
     start: function (e, ui) { 
      $(ui.helper).addClass('dragging'); 
     }, 
     stop: function (e, ui) { 
      $(ui.item).css({ width: '' }).removeClass('dragging'); 
      $(settings.columns).sortable('enable'); 
     } 
    }); 

然而,初始化當我再打電話

alert($('#widget_columns *').sortable('serialize')); 

找出小部件的順序,我得到正確的ID,但錯誤的順序,10,11,13:

widget[]=10&widget[]=11&widget[]=13 

任何想法,爲什麼這可能是?

回答

2

你申請父DIV的sortable方法,而不是ul我不知道爲什麼,也叫serialize當你不叫它以前排序對象!

這裏是一個小工作example

$('#column1').sortable({ 
    //connectWith: $('#widget_columns'), 
    revert: 300, 
    delay: 100, 
    opacity: 0.8, 
    containment: 'document', 
    start: function(e, ui) { 
     //$(ui.helper).addClass('dragging'); 
    }, 
    stop: function(e, ui) { 
     //$(ui.item).css({ width: '' }).removeClass('dragging'); 
     //$(settings.columns).sortable('enable'); 
     alert($(this).sortable('serialize')) 
    } 
}); 
+0

謝謝。你的代碼工作,我的*仍然不...猜猜這是爲我調試。 : -/ *我的生產代碼。我上面發佈的簡單版本的作品。 – winsmith 2011-05-14 14:08:21

0

要回答我的問題,它是與我的解決方案disable S中的排序,只要拖動結束的事實,並enable的IT時拖動開始,我從一些教程不經意地採取了一個概念。當我刪除禁用和重新啓用可排序代碼($(settings.columns).sortable('disable');)時,序列化工作正常。