<style>
:global([draggable]) {
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import ListView from 'svelte-sortable-flat-list-view'
</script>
<script>
let List = []
for (let i = 1; i < 10; i++) { List.push(new String('Item ' + i)) }
function logSortingEvent (Event) {
let [sortedItems,InsertionIndex] = Event.detail
console.log('sorted-items',sortedItems.join(','),InsertionIndex)
}
</script>
<p style="line-height:150%">
This example demonstrates sorting multiple items at once within a list:
you may select up to 3 individual items or (by pressing the Shift
key while clicking or tapping) ranges of items. Selection behaviour
differs depending on whether a mouse or a touch screen are used for input
</p>
<ListView style="width:180px; height:240px; border:solid 1px; overflow:auto"
sortable {List} SelectionLimit={3}
on:sorted-items={logSortingEvent}
/>
<p style="line-height:150%">