使用動態數據填充的可排序列表

我在使用JQuery-UI交互工作的頁面上遇到了一些問題。我之前沒有使用JQuery-UI，所以我開始嘗試使用可排序的交互方式，並希望稍後進行拖放和排序。但是，我一直把頭靠在牆上，甚至無法得到可以排序的工作。使用動態數據填充的可排序列表

我想要排序的內容是用ajax動態加載的。這是什麼樣的內容看起來像一個表示：

<ul id="category_list"> 
    <li class="category" data-category-id="17">Education</li> 
    <li class="category" data-category-id="20">General Information</li> 
    <li class="category" data-category-id="14">Music/Movies/Television</li> 
    <li class="category" data-category-id="18">Navigation</li> 
    <li class="category" data-category-id="19">Retailers</li> 
    <li class="category" data-category-id="16">Social Media</li> 
    <li class="category" data-category-id="15">Web Results</li> 
</ul>

這個jQuery函數加載數據：

// load all the engines in a category 
$('#container').on("click", ".buttonclass", function() { 
    $.get("/categories", { 
     id : $(this).attr('data-id') 
     }, function(data) { 
      var pane = $("#categories").data('jsp'); 
      pane.getContentPane().html(data); 
      pane.reinitialise(); 
     }); 
});

（窗格相關的東西，因爲這是通過滾動一個JScrollPane）。我嘗試在上面的函數中添加代碼以使列表元素可排序，但沒有任何效果。有些事情我已經試過有：

$('.category').sortable(); 
... 
$('.category'.each(function(){$(this).sortable()}; 
... 
$("#category_list").sortable(); 
... 
$('.category').sortable('refresh'); 
... 
$('.category'.each(function(){$(this).sortable('refresh')}; 
... 
$("#category_list").sortable('refresh');

我試過，沒有運氣添加代碼同時在回調函數裏面（的$不用彷徨）單擊處理和之後。

頁面（JscrollPane內部）硬編碼的靜態數據在排序時沒有問題。只是動態的內容造成麻煩。

任何幫助將不勝感激。

來源

2013-01-09 Brent C

找出問題，它是JScrollPane。儘管JScrollpane在靜態數據和可排序/可拖放/放置方面沒有問題，但它在動態填充時似乎會導致問題。

刪除了JScrollPanes和所有罰款，如果使用：

$("#category_list").sortable();

來源

2013-01-10 04:56:25

看看這jquery-UI documentation和排序和拖動相同的元素jqfaq.com。希望，這可能會幫助你。

來源

2013-01-09 08:19:56

理想的情況下應該是

$("#category_list").sortable();

如果您已經通過jQuery UI的可排序的文檔去了。

來源

2013-01-09 08:20:26

這也是我試過的事情之一;編輯以反映問題。 –

使用動態數據填充的可排序列表

回答

相關問題