Question

I am new to Jquery and I am trying to following this article Jquery Example to setup this but I am unable to drag my Items around. Im not sure what i am doing wrong. My code is below. Thanks,

<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.