Ghost image shown when dragging an element with a modal box contained inside

[wvhulle]

Dragging an element with a modal box button and class modal in it, shows a draggable ghost image that contains all draggable elements.

The following is Svelte code for such a modal, but it could be any HTML code.

<script lang="ts">
	import _ from 'lodash';
	export let removeFcn: () => void;
	let id = _.uniqueId('remove-');
</script>

<label for={id} class="btn "><slot name="button">Remove</slot></label>

<input type="checkbox" {id} class="modal-toggle" />
<div class="modal">
	<div class="modal-box">
		<h3 class="font-bold text-lg"><slot name="title">Remove</slot></h3>
		<p class="py-4"><slot>Are you sure you want to remove?</slot></p>
		<div class="modal-action">
			<label
				for={id}
				class="btn"
				on:click={() => {
					removeFcn();
				}}
			>
				<slot name="action">Remove</slot>
			</label>

			<label for={id} class="btn">
				<slot name="cancel">Cancel</slot>
			</label>
		</div>
	</div>
</div>