<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;
}
.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="