Return to Snippet

Revision: 36063
at September 29, 2011 22:33 by housecor


Updated Code
$("#sortable").sortable({ 
				cursor: 'move',
				placeholder: 'ui-state-highlight team-img-placeholder',
				revert: true,
				forcePlaceholderSize: true,
				tolerance: 'intersect',
				axis: 'y',
				forceHelperSize: true
			});
			$("#sortable").disableSelection();

//And to store the sorted ids:
				var sortedProviders = $('#ProviderList').sortable('toArray');

//OR, if each <li> has a name along with a number for its ID:
	var priorities = $('#pricing-rule-priority').sortable('toArray');
	for (var i = 0; i < priorities.length; i++) {
		priorities[i] = priorities[i].replace(/segment-/g, '');
	}
				$.ajax({
					type: "POST",
					url: "/Admin/Providers/Manage.aspx/SaveDisplayOrder",
					data: "{providerIDs: '" + sortedProviders.join() + "' }",
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function (msg) {
						$('#pnlUploadLogo').slideDown();
						if (msg.d != "true") alert('There was an error deleting the logo.');
					}
				});


//CSS:
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; cursor:move;}
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.team-img-placeholder {height:100px;}

//Repeater:
			<asp:Repeater ID="rptTeamMembers" runat="server">
				<HeaderTemplate><ul id="sortable"></HeaderTemplate>
				<ItemTemplate>
					<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>
				</ItemTemplate>
				<FooterTemplate></ul></FooterTemplate>
			</asp:Repeater>

Revision: 36062
at December 4, 2010 05:12 by housecor


Updated Code
$("#sortable").sortable({ 
				cursor: 'move',
				placeholder: 'ui-state-highlight team-img-placeholder',
				revert: true,
				forcePlaceholderSize: true,
				tolerance: 'intersect',
				axis: 'y',
				forceHelperSize: true
			});
			$("#sortable").disableSelection();

//And to store the sorted ids:
				var sortedProviders = $('#ProviderList').sortable('toArray');
				$.ajax({
					type: "POST",
					url: "/Admin/Providers/Manage.aspx/SaveDisplayOrder",
					data: "{providerIDs: '" + sortedProviders.join() + "' }",
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function (msg) {
						$('#pnlUploadLogo').slideDown();
						if (msg.d != "true") alert('There was an error deleting the logo.');
					}
				});


//CSS:
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; cursor:move;}
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.team-img-placeholder {height:100px;}

//Repeater:
			<asp:Repeater ID="rptTeamMembers" runat="server">
				<HeaderTemplate><ul id="sortable"></HeaderTemplate>
				<ItemTemplate>
					<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>
				</ItemTemplate>
				<FooterTemplate></ul></FooterTemplate>
			</asp:Repeater>

Revision: 36061
at November 17, 2010 14:08 by housecor


Initial Code
$("#sortable").sortable({ 
				cursor: 'move',
				placeholder: 'ui-state-highlight team-img-placeholder',
				revert: true,
				forcePlaceholderSize: true,
				tolerance: 'intersect',
				axis: 'y',
				forceHelperSize: true
			});
			$("#sortable").disableSelection();

//CSS:
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; cursor:move;}
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.team-img-placeholder {height:100px;}

//Repeater:
			<asp:Repeater ID="rptTeamMembers" runat="server">
				<HeaderTemplate><ul id="sortable"></HeaderTemplate>
				<ItemTemplate>
					<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>
				</ItemTemplate>
				<FooterTemplate></ul></FooterTemplate>
			</asp:Repeater>

Initial URL

                                

Initial Description

                                

Initial Title
JqueryUI sortable init/config call

Initial Tags

                                

Initial Language
jQuery