From cddc0217724f1a7661014d50e4c940e623a0c2dc Mon Sep 17 00:00:00 2001 From: Mario Date: Tue, 3 Aug 2021 07:12:35 +0000 Subject: Apps drag and drop feature --- library/Sortable/index.html | 460 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 460 insertions(+) create mode 100644 library/Sortable/index.html (limited to 'library/Sortable/index.html') diff --git a/library/Sortable/index.html b/library/Sortable/index.html new file mode 100644 index 000000000..35264911d --- /dev/null +++ b/library/Sortable/index.html @@ -0,0 +1,460 @@ + + + + + SortableJS + + + + + + + + + + + + + + Fork me on GitHub + +
+
+ +

SortableJS

+

JavaScript library for reorderable drag-and-drop lists

+ +
+
Features
+
  • Simple list
    • +
  • Shared lists
    • +
  • Cloning
    • +
  • Disabling sorting
    • +
  • Handles
    • +
  • Filter
    • +
  • Thresholds
    • +
    Examples
    +
  • Grid
    • +
  • Nested sortables
    • +
    Plugins
    +
  • MultiDrag
    • +
  • Swap
    • +
    Comparisons
    +
    Framework Support
    +
    +
    + +
    +

    Features

    +
    +
    +
    +

    Simple list example

    +
    +
    Item 1
    +
    Item 2
    +
    Item 3
    +
    Item 4
    +
    Item 5
    +
    Item 6
    +
    +
    +
    new Sortable(example1, {
+    animation: 150,
+    ghostClass: 'blue-background-class'
+});
    +
    +
    +
    + +
    +

    Shared lists

    +
    +
    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(example2Left, {
+    group: 'shared', // set both lists to same group
+    animation: 150
+});
+
+new Sortable(example2Right, {
+    group: 'shared',
+    animation: 150
+});
    +
    +
    +
    + +
    +

    Cloning

    +

    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
+});
    +
    +
    +
    + +
    +

    Disabling Sorting

    +

    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
+});
    +
    +
    +
    + +
    +

    Handle

    +
    +
      Item 1
    +
      Item 2
    +
      Item 3
    +
      Item 4
    +
      Item 5
    +
      Item 6
    +
    +
    +
    new Sortable(example5, {
+    handle: '.handle', // handle's class
+    animation: 150
+});
    +
    +
    +
    + +
    +

    Filter

    +

    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
+});
    +
    +
    +
    + +
    +

    Thresholds

    +

    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.

    +
    +
    + +
    + +
    1
    +
    + +
    + +
    2
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    Invert Swap
    +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    new Sortable(example7, {
+    swapThreshold: 1,
+    animation: 150
+});
    +
    +
    + + +
    +

    Examples

    +
    +
    + +
    +

    Grid Example

    +
    +
    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
    +
    +
    +
    + +
    +

    Nested Sortables Example

    +

    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
+	});
+}
    +
    +
    + +
    +

    Plugins

    +
    +
    + +
    +

    MultiDrag

    +

    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,
+	selectedClass: 'selected',
+	fallbackTolerance: 3, // So that we can select items on mobile
+	animation: 150
+});
    +
    +
    +
    + +
    +

    Swap

    +

    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
+});
    +
    +
    +
    + + + +
    + +
    +

    Comparisons

    +
    +
    + + +
    +

    jQuery-UI

    + + +

    Dragula

    + +
    + +
    + +
    +

    Framework Support

    +
    +
    + +
    + +

    Vue

    +

    Vue.Draggable

    + +

    React

    +

    react-sortablejs

    + +

    Angular

    +

    ngx-sortablejs

    + +

    jQuery

    +

    jquery-sortablejs

    + +

    Knockout

    +

    knockout-sortablejs

    + +

    Meteor

    +

    meteor-sortablejs

    + +

    Polymer

    +

    polymer-sortablejs

    + +

    Ember

    +

    ember-sortablejs

    +
    + +
    + + + + + + + + + + + -- cgit v1.2.3