JqueryUI sortable init/config call


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $("#sortable").sortable({
  2. cursor: 'move',
  3. placeholder: 'ui-state-highlight team-img-placeholder',
  4. revert: true,
  5. forcePlaceholderSize: true,
  6. tolerance: 'intersect',
  7. axis: 'y',
  8. forceHelperSize: true
  9. });
  10. $("#sortable").disableSelection();
  11.  
  12. //And to store the sorted ids:
  13. var sortedProviders = $('#ProviderList').sortable('toArray');
  14.  
  15. //OR, if each <li> has a name along with a number for its ID:
  16. var priorities = $('#pricing-rule-priority').sortable('toArray');
  17. for (var i = 0; i < priorities.length; i++) {
  18. priorities[i] = priorities[i].replace(/segment-/g, '');
  19. }
  20. $.ajax({
  21. type: "POST",
  22. url: "/Admin/Providers/Manage.aspx/SaveDisplayOrder",
  23. data: "{providerIDs: '" + sortedProviders.join() + "' }",
  24. contentType: "application/json; charset=utf-8",
  25. dataType: "json",
  26. success: function (msg) {
  27. $('#pnlUploadLogo').slideDown();
  28. if (msg.d != "true") alert('There was an error deleting the logo.');
  29. }
  30. });
  31.  
  32.  
  33. //CSS:
  34. #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; cursor:move;}
  35. #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; }
  36. #sortable li span { position: absolute; margin-left: -1.3em; }
  37. .team-img-placeholder {height:100px;}
  38.  
  39. //Repeater:
  40. <asp:Repeater ID="rptTeamMembers" runat="server">
  41. <HeaderTemplate><ul id="sortable"></HeaderTemplate>
  42. <ItemTemplate>
  43. <li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><img src="/Images/Team/<%#DataBinder.Eval(Container.DataItem, "Photo")%>" alt="<%#DataBinder.Eval(Container.DataItem, "Name")%>" title="<%#DataBinder.Eval(Container.DataItem, "Name")%>" class="team_member_photo" /> <label><%#DataBinder.Eval(Container.DataItem, "Name")%></label></li>
  44. </ItemTemplate>
  45. <FooterTemplate></ul></FooterTemplate>
  46. </asp:Repeater>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.