import * as UI from '../../src/index'
import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { action } from '@storybook/addon-actions'
DragAndDrop has three functions that can be used to handle dragging and dropping of uris, files, and images.
makeDraggable is used to make an element Draggable. Along with the HTML Element, it is also necessary to pass an
object with a uri. This is used to set the data on the EventListener for 'dragstart'.
makeDropTarget is used to make an element enabled as a drop target. Along with the HTML Element, it is also
necessary to pass in two callback functions; one to handle draggable uris and the other to handle draggable files and images.
uploadFiles is used to process the files that a user is uploading.
Drag the message from the "Draggable" story or drag any file or image and drop it on the element in the "Drop Target" story to see it work.
{() => { const dragElement = document.createElement("div") dragElement.appendChild(document.createTextNode("Drag me to the target!")) const uri = new $rdf.NamedNode('https://exampleuser.inrupt.net') UI.widgets.makeDraggable(dragElement, uri) return dragElement }} {() => { const target = document.createElement("div") target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px" target.appendChild(document.createTextNode("Drop things (URIs, files, ...) here")) UI.widgets.makeDropTarget(target, action('dropped uri'), action('dropped file')) return target }}The function uploadFiles could for example be used in the droppedFileHandler function which is passed to the
makeDropTarget function.