Advanced Search

JqueryUI sortable init/config call

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

Expand | Embed | Plain Text

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.