: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" lang="ts">

import DragDropTouch from 'svelte-drag-drop-touch'

import { asDropZone } from 'svelte-drag-and-drop-actions'

import ListView from 'svelte-sortable-flat-list-view'

</script>

<script>

let ListA = [], ListB = []

for (let i = 1; i < 10; i++) {

ListA.push(new String('Item ' + i))

ListB.push(new String('Item 1' + i))

}

function onInsertion (Event) {

let [ItemList,InsertionIndex] = Event.detail

console.log('inserted items ' + ItemList.join(',') + ' at ' + InsertionIndex)

}

function onRemoval (Event) {

let ItemList = Event.detail

console.log('deleted items ' + ItemList.join(','))

}

</script>

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

Drag single or multiple (up to 3) items from one list into the other.

Reload this page to reset

</p>