<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;
}
div { display:block }
:global(div.dragged) { display:none }
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDraggable } from 'svelte-drag-and-drop-actions'
</script>
<script>
let BoxX = 20, BoxY = 20
function onDragMove (x,y, dx,dy) { console.log('onDragMove',x,y, dx,dy) }
</script>
<p style="line-height:150%">
This example illustrates an alternative approach to "plain" dragging of a
given element by using the CSS class "dragged" which is assigned to a draggable
while it is dragged (and removed again afterwards) in combination with proper
styling
</p>
<div style="
display:block; position:relative;
width:400px; height:400px;
margin:20px;
border:dotted 1px black; border-radius:4px;
">
<div style="