### Initialize a simple sortable list Source: https://sortablejs.github.io/Sortable Basic setup for a sortable list with animation and a custom ghost class. ```javascript new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); ``` -------------------------------- ### Initialize shared sortable lists Source: https://sortablejs.github.io/Sortable Configure multiple lists to share the same group, allowing items to be moved between them. ```javascript new Sortable(example2Left, { group: 'shared', // set both lists to same group animation: 150 }); new Sortable(example2Right, { group: 'shared', animation: 150 }); ``` -------------------------------- ### Initialize nested sortable lists Source: https://sortablejs.github.io/Sortable Iterate through nested elements to apply Sortable configuration, recommended with fallbackOnBody enabled. ```javascript // 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 }); } ``` -------------------------------- ### Configure swap thresholds Source: https://sortablejs.github.io/Sortable Adjust swap behavior using swapThreshold and invertSwap for more precise control over item placement. ```javascript new Sortable(example7, { swapThreshold: 1, invertSwap: true, animation: 150 }); ``` -------------------------------- ### Enable Swap plugin Source: https://sortablejs.github.io/Sortable Changes behavior to swap items instead of reordering them. ```javascript new Sortable(swapDemo, { swap: true, // Enable swap plugin swapClass: 'highlight', // The class applied to the hovered swap item animation: 150 }); ``` -------------------------------- ### Enable cloning between lists Source: https://sortablejs.github.io/Sortable Set the pull option to 'clone' to keep the original item in place when dragging to another list. ```javascript 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 }); ``` -------------------------------- ### Enable MultiDrag plugin Source: https://sortablejs.github.io/Sortable Allows selecting and dragging multiple items simultaneously. ```javascript 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 }); ``` -------------------------------- ### Restrict dragging to a handle Source: https://sortablejs.github.io/Sortable Use the handle option to specify a CSS selector for the element that triggers the drag action. ```javascript new Sortable(example5, { handle: '.handle', // handle's class animation: 150 }); ``` -------------------------------- ### Filter non-draggable items Source: https://sortablejs.github.io/Sortable Use the filter option to prevent specific elements from being dragged. ```javascript new Sortable(example6, { filter: '.filtered', // 'filtered' class is not draggable animation: 150 }); ``` -------------------------------- ### Disable sorting in a list Source: https://sortablejs.github.io/Sortable Set the sort option to false to prevent reordering within a list while still allowing items to be dragged out. ```javascript 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 }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.