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

}

.floatingButton {

display:block; position:absolute;

width:32px; height:32px;

background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABA0lEQVRYR82WSw6EMAxD4bo9UK/LiAWjTCYfO6lUWEKwX01ocx6br3Oz/0EDzDmvCHqMQWlCxZmpB4TApADaPBNl610AVkingL5vAsiXsxVnTZxphQBd8wfugbD0/gCi4my10lCbebo/AFlcCICn4d03AarRW7+r1LJSWAYgxb24Q4DOt0fMvYb8JlAFYMxvCO3TAmDNlwJUzJcBVM2XAHTM2wBd8xbACvMQwHqo/125FVd2y/JOiJ7t2VkBA9xC1h6u72eG8jl0GEWfgTGzaqHjGBkgKiDUQCJT6ERuNTA0EXmdz3Y92rjvHcu9DmZ6AEktTUAbWmNXZ4OiAZgEkNrtAB9tuDAwYD8R4wAAAABJRU5ErkJggg==");

cursor:pointer; pointer-events:auto;

}

</style>

<script context="module">

import DragDropTouch from 'svelte-drag-drop-touch'

import { asDraggable } from 'svelte-drag-and-drop-actions'

</script>

<script>

let ButtonX = 400-32-2, ButtonY = 2, ButtonWidth = 32, ButtonHeight = 32

let ArenaWidth = 400, ArenaHeight = 400

function onDragStart () { return { x:ButtonX,y:ButtonY } }

function onDragMove (x,y, dx,dy) { ButtonX = x; ButtonY = y }

function onDragEnd (x,y, dx,dy) { ButtonX = x; ButtonY = y }

function onClick () { window.alert('button was clicked') }

</script>

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

Drag the button around - or click it (both is possible):

</p>

<div style="