var example1 = document.getElementById('example1'), example2Left = document.getElementById('example2-left'), example2Right = document.getElementById('example2-right'), example3Left = document.getElementById('example3-left'), example3Right = document.getElementById('example3-right'), example4Left = document.getElementById('example4-left'), example4Right = document.getElementById('example4-right'), example5 = document.getElementById('example5'), example6 = document.getElementById('example6'), example7 = document.getElementById('example7'), gridDemo = document.getElementById('gridDemo'), multiDragDemo = document.getElementById('multiDragDemo'), swapDemo = document.getElementById('swapDemo'); // Example 1 - Simple list new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); // Example 2 - Shared lists new Sortable(example2Left, { group: 'shared', // set both lists to same group animation: 150 }); new Sortable(example2Right, { group: 'shared', animation: 150 }); // Example 3 - Cloning 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 }); // Example 4 - No Sorting 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 }); // Example 5 - Handle new Sortable(example5, { handle: '.handle', // handle class animation: 150 }); // Example 6 - Filter new Sortable(example6, { filter: '.filtered', animation: 150 }); // Example 7 - Thresholds var example7Sortable = new Sortable(example7, { animation: 150 }); var example7SwapThreshold = 1; var example7SwapThresholdInput = document.getElementById('example7SwapThresholdInput'); var example7SwapThresholdCode = document.getElementById('example7SwapThresholdCode'); var example7SwapThresholdIndicators = [].slice.call(document.querySelectorAll('.swap-threshold-indicator')); var example7InvertSwapInput = document.getElementById('example7InvertSwapInput'); var example7InvertSwapCode = document.getElementById('example7InvertSwapCode'); var example7InvertedSwapThresholdIndicators = [].slice.call(document.querySelectorAll('.inverted-swap-threshold-indicator')); var example7Squares = [].slice.call(document.querySelectorAll('.square')); var activeIndicators = example7SwapThresholdIndicators; var example7DirectionInput = document.getElementById('example7DirectionInput'); var example7SizeProperty = 'width'; function renderThresholdWidth(evt) { example7SwapThreshold = Number(evt.target.value); example7SwapThresholdCode.innerHTML = evt.target.value.indexOf('.') > -1 ? evt.target.value.padEnd(4, '0') : evt.target.value; for (var i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style[example7SizeProperty] = (evt.target.value * 100) / (activeIndicators == example7SwapThresholdIndicators ? 1 : 2) + '%'; } example7Sortable.option('swapThreshold', example7SwapThreshold); } example7SwapThresholdInput.addEventListener('input', renderThresholdWidth); example7InvertSwapInput.addEventListener('input', function(evt) { example7Sortable.option('invertSwap', evt.target.checked); for (var i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style.display = 'none'; } if (evt.target.checked) { example7InvertSwapCode.style.display = ''; activeIndicators = example7InvertedSwapThresholdIndicators; } else { example7InvertSwapCode.style.display = 'none'; activeIndicators = example7SwapThresholdIndicators; } renderThresholdWidth({ target: example7SwapThresholdInput }); for (i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style.display = ''; } }); function renderDirection(evt) { for (var i = 0; i < example7Squares.length; i++) { example7Squares[i].style.display = evt.target.value === 'h' ? 'inline-block' : 'block'; } for (i = 0; i < example7InvertedSwapThresholdIndicators.length; i++) { /* jshint expr:true */ evt.target.value === 'h' && (example7InvertedSwapThresholdIndicators[i].style.height = '100%'); evt.target.value === 'v' && (example7InvertedSwapThresholdIndicators[i].style.width = '100%'); } for (i = 0; i < example7SwapThresholdIndicators.length; i++) { if (evt.target.value === 'h') { example7SwapThresholdIndicators[i].style.height = '100%'; example7SwapThresholdIndicators[i].style.marginLeft = '50%'; example7SwapThresholdIndicators[i].style.transform = 'translateX(-50%)'; example7SwapThresholdIndicators[i].style.marginTop = '0'; } else { example7SwapThresholdIndicators[i].style.width = '100%'; example7SwapThresholdIndicators[i].style.marginTop = '50%'; example7SwapThresholdIndicators[i].style.transform = 'translateY(-50%)'; example7SwapThresholdIndicators[i].style.marginLeft = '0'; } } if (evt.target.value === 'h') { example7SizeProperty = 'width'; example7Sortable.option('direction', 'horizontal'); } else { example7SizeProperty = 'height'; example7Sortable.option('direction', 'vertical'); } renderThresholdWidth({ target: example7SwapThresholdInput }); } example7DirectionInput.addEventListener('input', renderDirection); renderDirection({ target: example7DirectionInput }); // Grid demo new Sortable(gridDemo, { animation: 150, ghostClass: 'blue-background-class' }); // Nested demo var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable')); // 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 }); } // MultiDrag demo new Sortable(multiDragDemo, { multiDrag: true, selectedClass: 'selected', animation: 150 }); // Swap demo new Sortable(swapDemo, { swap: true, swapClass: 'highlight', animation: 150 });