<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;
}
.Waste {
display:block; position:absolute;
width:80px; height:30px;
color:black;
line-height:30px; text-align:center;
cursor:move;
}
:global(.Waste.dropped) { display: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">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDroppable, asDropZone } from 'svelte-drag-and-drop-actions'
</script>
<script>
let Waste_1, Waste_2
function onDrop (x,y, Operation, DataOffered, DroppableExtras, DropZoneExtras) {