: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;

}

.Handle {

display:inline-block; position:absolute;

top:5px; right:4px; width:20px; height:20px;

cursor:move;

}

</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)) }

</script>

<p style="line-height:150%">

This example demonstrates sorting list items from provided handles (while

selecting and deselecting still works from the whole item)

</p>

<ListView style="width:180px; height:240px; border:solid 1px; overflow:auto"

sortable {List} let:Item SelectionLimit={3} onlyFrom="svg"

>

<div>

{Item}

<svg class="Handle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

</div>