Sortable lists

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

Nested Lists

Drag & Drop nestable lists. This is very useful to order categories for example.

  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3.1
    2. Item 3.2
    3. Item 3.3
    4. Item 3.4
    5. Item 3.5
    6. Item 3.6
  4. Item 4
  5. Item 5
  6. Item 6 
<ol id="item" class="js-sortable" data-fc-modules="sortable" data-fc-url="#" data-fc-type="nested" data-fc-output="json" data-fc-depth="2">
	<li data-fc-id="0" data-fc-name="Item 1">
		Item 1
	</li>
	<li data-fc-id="1" data-fc-name="Item 2">
		Item 2
	</li>
	<li data-fc-id="2" data-fc-name="Item 3">
		Item 3
		<ol>
			<li data-fc-id="3-0" data-fc-name="Item 3.1">Item 3.1</li>
			<li data-fc-id="3-1" data-fc-name="Item 3.2">Item 3.2</li>
			<li data-fc-id="3-2" data-fc-name="Item 3.3">Item 3.3</li>
			<li data-fc-id="3-3" data-fc-name="Item 3.4">Item 3.4</li>
			<li data-fc-id="3-4" data-fc-name="Item 3.5">Item 3.5</li>
			<li data-fc-id="3-5" data-fc-name="Item 3.6">Item 3.6</li>
		</ol>
	</li>
	<li data-fc-id="3" data-fc-name="Item 4">
		Item 4
	</li>
	<li data-fc-id="4" data-fc-name="Item 5">
		Item 5
	</li>
	<li data-fc-id="5" data-fc-name="Item 6">
		Item 6
	</li>
</ol>

Order to input

Drag & Drop sortable lists to input field

  • Item 1
  • item 2
  • item 3
<ul class="list" data-fc-modules="sortable" data-fc-input="sortable-input">
	<li id="sortable-1">Item 1</li>
	<li id="sortable-2">item 2</li>
	<li id="sortable-3">item 3</li>
</ul>
<form class="form">
	<label>Order</label>
	<input id="sortable-input" type="text" value="">
</form>

Order to Ajax call

Drag & Drop sortable lists with ajax callback to save changes.

  • Item 1
    • Item 1
      • Item 1
      • item 2
      • item 3
    • item 2
    • item 3
  • item 2
  • item 3
<ul class="list" data-fc-modules="sortable" data-fc-url="#" data-fc-output="json">
	<li>
		Item 1
		<ul class="list">
			<li>
				Item 1
				<ul class="list">
					<li>
						Item 1
					</li>
					<li>item 2</li>
					<li>item 3</li>
				</ul>
			</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
	</li>
	<li id="sortable-2">item 2</li>
	<li id="sortable-3">item 3</li>
</ul>

Attributes

data-fc-url

Url of the ajax service to save changes. If it's not defined there is not ajax call.

data-fc-input

Id of the Input that should get the order. If it's not defined no data will be send to any input.

DEFAULT: sortable

data-fc-output

Define how will be the output send, by a string separated by comma or a complex json.

DEFAULT: string

data-fc-type

If you define this as 'nested' will work with data-fc-depth levels of lists.

DEFAULT: default

data-fc-handle

Looks for just an element (using jquery selector) inside the items to be the handle.

data-fc-depth

If you define the type as nested will set how many depth levels will accept

DEFAULT: 2