500
The requested module '/node_modules/agnostic-draggable-bug-fixed/dist/agnostic-draggable.js?v=e1269044' does not provide an export named 'default'
SyntaxError: The requested module '/node_modules/agnostic-draggable-bug-fixed/dist/agnostic-draggable.js?v=e1269044' does not provide an export named 'default'

<!------------------------------------------------------------------------------
--  for additional, more detailled examples visit                             --
--  https://github.com/rozek/svelte-agnostic-draggable/blob/main/README.md    --
------------------------------------------------------------------------------->

<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;
    }
  </style>
  
  <script>
    import { onMount } from 'svelte';
    import { draggable } from 'svelte-agnostic-draggable'
  
  /**** map all touch events to mouse events ****/
  
    import mapTouchToMouseFor from 'svelte-touch-to-mouse'


  onMount(() => {
    mapTouchToMouseFor('.draggable')
  
  /**** Svelte Event Handling ****/
  
    function onDraggableInit ()    { console.log('Draggable was created') }
    function onDragStart ()        { console.log('dragging started') }
    function onDragMove ()         { console.log('dragging continues') }
    function onDragStop ()         { console.log('dragging was stopped') }
    function onDraggableDestroy () { console.log('Draggable was destroyed') }
  });

  </script>
  

  
  
    <div class="draggable" use:draggable={{
      containment:'parent', cursor:'grabbing'
    }} style="
      display:block; position:absolute;
      left:20px; top:20px; width:100px; text-align:center;
      padding:10px; background:forestgreen; color:white; cursor:grab
    " on:draggable:init={onDraggableInit} on:draggable:destroy={onDraggableDestroy}
      on:drag:start={onDragStart} on:drag:move={onDragMove} on:drag:stop={onDragStop}
    >Drag me!</div>

    <div use:draggable={{
        containment:'parent', cursor:'grabbing'
      }} class='draggable' on:draggable:init={onDraggableInit} on:draggable:destroy={onDraggableDestroy}
    on:drag:start={onDragStart} on:drag:move={onDragMove} on:drag:stop={onDragStop}>
        <img alt="alt" src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com" />
    </div>
    <div use:draggable={{
        containment:'parent', cursor:'grabbing'
      }} class='draggable' on:draggable:init={onDraggableInit} on:draggable:destroy={onDraggableDestroy}
    on:drag:start={onDragStart} on:drag:move={onDragMove} on:drag:stop={onDragStop}>
        <img alt="alt" src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" />
    </div>
    <div use:draggable={{
        containment:'parent', cursor:'grabbing'
      }} class='draggable' on:draggable:init={onDraggableInit} on:draggable:destroy={onDraggableDestroy}
    on:drag:start={onDragStart} on:drag:move={onDragMove} on:drag:stop={onDragStop}>
        <img alt="alt" src="https://via.placeholder.com/150/FFFF00/000000?Text=WebsiteBuilders.com" />
    </div>

<script>
	import Draggable from '../components/Draggable.svelte';
</script>


<section class="hero">
	<div class="background">
		<img src="images/logo.png" alt="An Asset of Community Value" width="120" height="57" />
	</div>

	<div class="foreground">
		<Draggable />
	</div>
	
</section>

<style>
	.hero {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.fake-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: -1;
		background: white;
	}

	.foreground {
		position: relative;
		z-index: 5;
		height: 100%;
    	width: 100%;
	}

	.foreground img {
		user-select: none;
	}
</style>