2011-05-14 65 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');)时,序列化工作正常。