<style>
.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>
import { draggable } from 'svelte-agnostic-draggable'
/**** map all touch events to mouse events ****/
import mapTouchToMouseFor from 'svelte-touch-to-mouse'
mapTouchToMouseFor('.draggable')
/**** event handlers ****/
let wasDragged = false
function onMouseDown () { wasDragged = false }
function onDragStart () { wasDragged = true }
function onMouseUp () {
if (! wasDragged) {
window.alert('button was clicked')
}
}
</script>
<p style="line-height:150%">