jquery排序水平列表

Question

我有一個困難的時間讓我的jQuery排序列表水平顯示。用戶可以將報表部件拖放到舞臺上，然後將一列拖放到報表部件上。隨着額外的列被刪除，div應該水平擴展。但是我嘗試的所有東西都是垂直排列的。

你可以在這裏看到：http://jsfiddle.net/asleepatmydesk/kNfGC/

當報表控件拖放到舞臺上，我試圖修改<UL>的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; 
}