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

}

</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 onDragStart () { console.log('onDragStart'); return { x:BoxX,y:BoxY} }

function onDragMove (x,y, dx,dy) { console.log('onDragMove',x,y, dx,dy); BoxX = x; BoxY = y }

function onDragEnd (x,y, dx,dy) { console.log('onDragEnd', x,y, dx,dy); BoxX = x; BoxY = y }

</script>

<p style="line-height:150%">

This example illustrates "plain" dragging of a given element (in this example

there are no bounds for dragging, there is another example with such bounds)

</p>

<p style="line-height:150%">

Please note: if this example starts lagging after a few moments, this is just

because of the amount of console output - HTML5 DragEvents will be generated

at a very high rate!

</p>

<div style="