<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;
}
:global(body) { overflow:hidden }
:global(.Badge) {
display:block; position:absolute;
top:-10px; right:-10px; width:20px; height:20px;
background:red; color:white;
border:none; border-radius:50%; margin:0px; padding:0px;
line-height:20px; text-align:center;
}
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDraggable } from 'svelte-drag-and-drop-actions'
</script>
<script>
let DraggableX = 20, DraggableY = 20, DraggableWidth = 80, DraggableHeight = 30
let ArenaWidth = 400, ArenaHeight = 400
let Draggable
function dynamicDummy () {
let auxiliaryElement = Draggable.cloneNode(true)
auxiliaryElement.style.display = 'block'
auxiliaryElement.style.position = 'absolute'
auxiliaryElement.style.left = (document.body.scrollWidth + 100)+'px'
let Badge = document.createElement('div')
Badge.classList.add('Badge')