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

}

.Trashcan {

display:block; position:absolute;

width:32px; height:64px;

background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAABCElEQVRoQ+2YWxKDIAxFdZMskk3a4YOOYiC5IdXW3v50po9wOIkRsy43v9ab118IQAM0QAM0QAO/aSDnvLV30ZSSazOnP0nBo27ZEuQBoCzu3YkFUor/Bvj04hWwXYcABwOWPEb8Zl9nrksnAqLGOF0FkcGlWO1VxiKkge83MGrRWvuWvodbMQEuM1C6liVn++6G1sDwPBANYN2MeiLypuA5AL3UjD5H0qmmgAA0QAMeA73m5WrFBPgvA0gPR830ClOckLSPT0hVo5swAaBBrWeBEvd5AGi6wg0QYNoAUvHWah+drMUZkfbAgY5xYIBqobzPTE7r2HcUQ52SzcyOLfAqAKob/T0BXlJOsF8O+4E8AAAAAElFTkSuQmCC");

}

.Trashcan:global(.hovered) {

width:32px; height:64px;

background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAABQ0lEQVRoQ+2ZURLCIAxE7SV7yF5Shw8cTAPZTZN2nImfKvB4rAHp9nr4tT08/qsAysDUwHEc7x7Qfd/TTKkdt8HHQTtMBggE0E1kgJwA5Oy1OhEJogK0QRHdY07QNnJCZgizQcx0M7o9vxwTwBtAFBwGyAKhASQIGr6ZETfAmGZUd2sjvxsC4FmeXm9CARiQVAALZKy2KQZktZPrfjvAysgtBlYH3x8AublknJjl3vIFQLbhCCA5TgGUAdPAKpxWcLXP6RAWwG0G+mFBVqpIAK2vUymOAkAC2CZdAKaBWTZW7zN5KoAyUAZSDMzKt6sUe+pAAfyvAaaGs9mYWYEuKhml7CQgALZT9DByOpBEaX0UgF2u8CUogMsGmMSjYVv9t6CemHhvSGgA7UrVM7i8ntP6MG/JrlxcIQ87TADPzJk2BfAB0nT8X+D24mMAAAAASUVORK5CYII=");

}

</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 List = []

for (let i = 1; i < 10; i++) { List.push(new String('Item ' + i)) }

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 the list into the trashcan.