jquery - 在 DataList 控件上实现 Jquery Sortable

Question

我是 Jquery 的新手，我正在尝试按照这篇文章Jquery Example进行设置，但我无法拖动我的项目。我不确定我做错了什么。我的代码如下。谢谢，

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

$(function () {
   $("#<%=dlProcessList.ClientID %> tbody").sortable({
       handle: ".handle",
       placeholder: 'ui-state-highlight',
       cursor: 'move',
       start: function (event, ui) {
           ui.placeholder.height(ui.helper.height());
       }
   }).disableSelection();
});        

<asp:DataList ID="dlList" runat="server" >
  <HeaderTemplate>
      <tbody>
  </HeaderTemplate>

  <ItemTemplate>
       // My Data to display
  </ItemTemplate>  

  <FooterTemplate>
      </tbody>
  </FooterTemplate>
</asp:DataList>

Answer 1

Try this:

Add "//" to your script imports, like this:

<script src="//code.jquery.com/jquery-1.8.2.js"></script>
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Also remove all the sortable options and just use the defaults to see if you can get it working...

Change this:

$(function () {
   $("#<%=dlList.ClientID %> tbody").sortable({
       handle: ".handle",
       placeholder: 'ui-state-highlight',
       cursor: 'move',
       start: function (event, ui) {
           ui.placeholder.height(ui.helper.height());
       }
   }).disableSelection();
}); 

To this:

$(function () {
    $("#<%=dlList.ClientID %> tbody").sortable();
});

See if that gets it working.

Answer 2

看，这可能是你的问题...

http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/

http://jsfiddle.net/bgrins/tzYbU/