: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="

width:{ArenaWidth}px; height:{ArenaHeight}px; margin:20px;

">

<div style="

left:20px; top:20px; width:{DraggableWidth}px; height:{DraggableHeight}px;

" use:asDraggable={{