jquery - jQuery可排序的水平列表

Question

我很难让我的 jquery 可排序列表水平显示。假设用户将报表部件拖到舞台上，然后将列拖放到报表部件上。随着其他列被删除，div 应该水平扩展。但是我尝试的所有东西总是垂直排序。

你可以在这里看到它：http: //jsfiddle.net/asleepatmydesk/kNfGC/

当报告控件被放到舞台上时，我正在尝试修改 <ul> 和 <li> 的css，如下所示：

    $('.stage').droppable({
        accept: '.reportControl',
        tolerance: "fit",
        drop: function (event, ui) {
            var pos = $(ui.helper).offset();
            $(this).append($(ui.helper).clone());
            $('.stage .reportControl').replaceWith(gridControlDropped);

            $('.gridControlDropped')
                .draggable({
                handle: '.filterContainer',
                cursor: 'move',
                containment: '.stage'
            })
            var ul = $('.droppedColumns')
            ul.sortable({
                connectWith: ".connected",
                placeholder: "ui-state-highlight"

            })


        }
    });
      var ul = $('.droppedColumns')   //modifying the ul
            ul.sortable({
            connectWith: ".connected"
            , placeholder: "ui-state-highlight"

      })
       .css({
            'float': 'left'
            , 'display':'inline-block'
           });

          var li = $('.droppedColumns li').css({
               'display': 'inline-block'
       });

但似乎没有任何效果。任何意见，将不胜感激。

谢谢。

Answer 1

只需将此添加到gridControlDropped课程中

.gridControlDropped {
 display: inline-block;
}