Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://sortablejs.github.io/Sortable below:

SortableJS

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});

Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

new Sortable(example4Left, {
    group: {
        name: 'shared',
        pull: 'clone',
        put: false // Do not allow items to be put into this list
    },
    animation: 150,
    sort: false // To disable sorting: set sort to false
});

new Sortable(example4Right, {
    group: 'shared',
    animation: 150
});

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5

  Item 6

new Sortable(example5, {
    handle: '.handle', // handle's class
    animation: 150
});

Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.

Item 1

Item 2

Item 3

Filtered

Item 4

Item 5

new Sortable(example6, {
    filter: '.filtered', // 'filtered' class is not draggable
    animation: 150
});

Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.

new Sortable(example7, {
    swapThreshold: 1,
    invertSwap: true,
    animation: 150
});

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.
It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).

Item 1.1

Item 2.1

Item 2.2

Item 3.1

Item 3.2

Item 3.3

Item 3.4

Item 2.3

Item 2.4

Item 1.2

Item 1.3

Item 1.4

Item 2.1

Item 2.2

Item 2.3

Item 2.4

Item 1.5

// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
	new Sortable(nestedSortables[i], {
		group: 'nested',
		animation: 150,
		fallbackOnBody: true,
		swapThreshold: 0.65
	});
}

The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

new Sortable(multiDragDemo, {
	multiDrag: true, // Enable multi-drag
	selectedClass: 'selected', // The class applied to the selected items
	fallbackTolerance: 3, // So that we can select items on mobile
	animation: 150
});

The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

new Sortable(swapDemo, {
	swap: true, // Enable swap plugin
	swapClass: 'highlight', // The class applied to the hovered swap item
	animation: 150
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4