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

}

.Pane {

display:block; position:absolute;

width:1000px; height:1000px;

background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABcUlEQVR4Xu3TAQ3AMAzEwIV1IYT1prE4qQ4Cy87P7r5PxxiYP8g5Zxiiy0EKgj1AQQqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQrAgHycVjwuhUlduAAAAAElFTkSuQmCC");

background-repeat:repeat;

}

</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

function onDragMove (x,y, dx,dy) { DraggableX = x; DraggableY = y }

function onDragEnd (x,y, dx,dy) { DraggableX = x; DraggableY = y }

</script>

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

This example illustrates "plain" dragging of a given element within a given

region that is only partially visible and automatically scrolls whenever the

Draggable reaches the border of the visible part.

</p>

<div id="Pannable" style="