<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 }
</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 existingDummy
</script>
<p style="line-height:150%">
This example illustrates "plain" dragging a custom "Dummy" element
</p>
<div style="
display:block; position:relative;
width:{ArenaWidth}px; height:{ArenaHeight}px; margin:20px;
border:dotted 1px black; border-radius:4px;
">
<div style="
display:block; position:absolute;
left:20px; top:20px; width:{DraggableWidth}px; height:{DraggableHeight}px;
background:forestgreen; color:white; line-height:30px; text-align:center; cursor:move;
" use:asDraggable={{