Super Simple Full Screen Drag And Drop JS

A super simple, one file JavaScript solution to add a full screen drag and drop window to any web page.

🔨 Quick setup

Include the script via an HTML <script> tag.

<script src="./mini_SuperSimpleFullScreenDragAndDrop.js"></script>

Set up the full screen drag and drop window like so:

// Create a new drag and drop window object
const dragAndDrop = new SuperSimpleFullScreenDragAndDropJS();

// Add the eventlistner
dragAndDrop.addEventListener("dropped", (event) => {

    // Use the value of the drop event
    alert(event.detail.value);

});

// Enable the drag and drop window
dragAndDrop.enable();

Considerations

To avoid issues, consider adding an event listener to check if the page has fully loaded before enabling the drag and drop window.

// Add an event listener to check if the page has fully loaded
document.addEventListener("DOMContentLoaded", () => {

    // Enable the drag and drop window once the page loaded
    dragAndDrop.enable();

};

🛠️ Advanced setup

Adjust window properties

These are the properties / settings that can be adjusted before enabling the main window.

// The info text that is displayed when the drag and drop window appears
dragAndDrop.text  = "Drag and Drop";

// The path or data of the icon that is displayed when the drag and drop window appears
dragAndDrop.icon = "/path/to/my/icon.png";

// Z-Index, this should be the highest value of all the HTML elements on the site to make the window appear in front of everything
dragAndDrop.zIndex = 1000;

// Name of the event that is being dispatched
dragAndDrop.eventName = "dropped";

Adjust window styling

These are the styling options that can be adjusted before enabling the main window. The value syntax is standard CSS.

// Main window styling
dragAndDrop.style.window.padding   = "50px";
dragAndDrop.style.window.color     = "rgba(0, 0, 0, 0.5)";
dragAndDrop.style.window.blur      = "50px";
dragAndDrop.style.window.animation = "100ms";

// Border styling
dragAndDrop.style.border.width     = "100%";
dragAndDrop.style.border.height    = "100%";
dragAndDrop.style.border.size      = "5px";
dragAndDrop.style.border.color     = "rgba(255, 255, 255, 1)";
dragAndDrop.style.border.style     = "dashed";
dragAndDrop.style.border.radius    = "50px";
dragAndDrop.style.border.padding   = "50px";

// Info icon styling
dragAndDrop.style.icon.size        = "150px";

// Info text styling
dragAndDrop.style.text.family      = "Arial, Helvetica, sans-serif";
dragAndDrop.style.text.size        = "30px";
dragAndDrop.style.text.color       = "rgba(255, 255, 255, 1)";
dragAndDrop.style.text.weight      = "normal";
dragAndDrop.style.text.style       = "normal";

Module usage

This script can also be loaded as an ES6 module by using the module version. The standard behavior of the module is to exoport default the class that can then be import by doing:

import SuperSimpleFullScreenDragAndDropJS from "./mini_module_SuperSimpleFullScreenDragAndDrop.js"

The rest of the setup is the same as previously shown, except for the HTML <script> tag loading the regular version, which isn't required any more.

✨ Example

An example page using this script can be found at Example/index.html. The Example/main.js file illustrates a simple implementation on how to use the drag and drop window. The example uses the fully written out version of the main script from Source/SuperSimpleFullScreenDragAndDrop.js, for a "production" environment one of the Release/mini_* version should be used.

Demo

A short demo video showing off the drag and drop window.

Demo.mp4