Drag-Drop Plus

A JavaScript library for enabling drag and drop functionality on any elements in the DOM. This library also includes accessibility features, allowing users to drag and drop elements using only their keyboard.

Request a Feature

About The Project

The drag-drop-plus library is a powerful and easy to use tool that allows developers to easily add drag and drop functionality to their web projects. This library is designed to make it easy to add drag and drop functionality to any element in the DOM, while also providing accessibility options so users can drag and drop elements using only their keyboard.

Use this library if:

• You want to drag any element and drop it somewhere on DOM
• You also want Drag-drop feature withthe keyboards

Built With

Installation

Include one of the following CDN link in your project. And create a new instance of the class.

https://devashishp1999.github.io/drag-drop-plus/main.min.js

<script src="CDN_LINK"></script>

<script>
  const draggable = new DragDrop();
</script>

Or Install with NPM:

npm i drag-drop-plus

import DragDrop from "drag-drop-plus";

const draggable = new DragDrop();

NOTE : The script needs an attribute of the element to make it draggable or a drop-zone. Default attributes are set for:

• Element to drag : data-draggable
• Element to drop in : data-dropzone

Also you can set your custom Attributes. To make an element droppable in specific drop-zone among multiple drop-zones.

To see elements in action, do not forget to add styles. data-dragging-box is the default attribute for the element while dragging. And the Element while dragging will always be a clone() of the element you are dragging.

Usage - Demo link

Basic drag-drop

1.) Create an instance.

const draggable = new DragDrop();

2.) Add required attributes to HTML Tags

<!-- Tell script what to drag -->
<span data-draggable> drag-box 1 </span>
<span data-draggable> drag-box 2 </span>

<!-- Tell script where to drop -->
<div data-dropzone>drop-zone 1</div>
<div data-dropzone>drop-zone 2</div>
<div data-dropzone>drop-zone 3</div>

And DONE. Now, in this example, <span> elements are draggable and you can drop them inside the <div> elements.

Drop-zone specific drag-boxes : setDragDropElements()

To create multiple draggable-boxes and specific drop-zones for them. Create multiple instances of the class and use setDragDropElements() method.

1.) Create multiple instances.

const draggable_1 = new DragDrop();
const draggable_2 = new DragDrop();

// 1st Drag-Drop Environment
draggable_1.setDragDropElements({
  boxAttr: "data-draggable-1",
  dropboxAttr: "data-dropzone-1",
  dragboxAttr: "data-dragging-box-1", // Attribute for the Element while dragging
});

// 2nd Drag-Drop Environment
draggable_2.setDragDropElements({
  boxAttr: "data-draggable-2",
  dropboxAttr: "data-dropzone-2",
  dragboxAttr: "data-dragging-box-2", // Attribute for the Element while dragging
});

2.) Add required attributes to HTML Tags

<!-- Draggable SET 1-->
<span data-draggable-1> drag-box 1 </span>
<span data-draggable-1> drag-box 1 </span>

<!-- DropZone for SET 1 -->
<div data-dropzone-1>drop-zone 1</div>
<div data-dropzone-1>drop-zone 2</div>

------------------------------------------

<!-- Draggable SET 2-->
<span data-draggable-2> drag-box 2 </span>
<span data-draggable-2> drag-box 2 </span>

<!-- DropZone for SET 2 -->
<div data-dropzone-2>drop-zone 1</div>
<div data-dropzone-2>drop-zone 2</div>

Now the <span> elements with data-draggable-1 attribute can only be dropped in the <div> elements with the data-dropzone-1 attributes. And same for every new Attribute you specify for a new Instance new DragDrop().

Drag-Drop with Keyboard:

1. Move to a draggable element with TAB key.

2. Press SPACE key to select the focused draggable element.

3. To drop you have 2 options :

   • Use TAB key to focus a dropzone. And then press SPACE key to drop on focused dropzone.
   • Use Arrow Keys to move the selected drag-box. And make its center inside your favourite dropzone. And then press SPACE key to drop the element.

Methods and properties

The library is built with a number of abstracted methods, which make it easy for developers to customize the behavior of the drag and drop functionality to fit their specific needs.

Properties :

1) draggingBox: Reference of the HTMLElement being dragged. Read Only. 2) boxToDrag: Reference of the HTMLElement to drag. Read Only.

Note : boxToDrag !== draggingBox

const draggable = new DragDrop();

draggable.onDragStart = function () {
  console.log(draggable.draggingBox); // HTMLElement user is dragging
  console.log(draggable.boxToDrag); // HTMLElement that is selected to drag
};

// There are more methods other than onDragStart(). See 'Methods' section

3) droppable : Read Only.

const draggable = new DragDrop();

draggable.onDrag = function () {
  // Read Only property.
  console.log(draggable.draggable); // Logs the Object on every Drag event
};
/*
Returned Object :
{
  value: false, // If draggibg-box is over valid drop-zone or not. Default: false
  dropbox: null, // Valid dropbox HTMLElement or Null/False. Default: null
};
*/

It can be used to check, before droping or while dragging, if an element can be dropped or not. and get the drop-zone element. Can be helpful to style elements, also with the methods() listed below.

Methods :

1) setDragDropElements() : Tells script the value of custom attributes.

Put the same attributes in your HTMLElements that you update via this method

const draggable = new DragDrop();

draggable.setDragDropElements({
  boxAttr: "data-drag-this",
  dropboxAttr: "data-drop-here",
  dragboxAttr: "data-being-dragged", // Attribute for the Element while dragging
});

2) addEventListners() : Adds eventListners to drag-drop to the elements with the specified attributes. The class this function by default.

3) removeEventListners() : Removes all the attached eventListners for the Drag-drop functionality from the elements with the attributes in that instance.

const draggable_1 = new DragDrop();
const draggable_2 = new DragDrop();

draggable_1.removeEventListners();
draggable_1.addEventListners();

draggable_2.removeEventListners();

Methods to override : by default they are set to () => null

1) onDragStart() : runs when selected a draggable-box 2) onDrag() : runs when Dragging with mouse/ Touch/ KeyPresses 3) onKeyDrag() : runs when Dragging with only KeyPress 4) onDragEnd() : runs when mouse is released after dragging. 5) onDrop() : runs when element dropped successfully 6) onTabKeypress() : runs when hopping b/w drop-zones.

Override these methods, if you want to, as following:

const draggable = new DragDrop();

draggable.onDragStart = function () {
  console.log(draggable.boxToDrag); // HTMLElement user selected to drag

  /* Any thing you want to do onDragStart */
};

draggable.onDrag = function (event) {
  console.log(draggable.draggingBox); // HTMLElement user is dragging
  console.log(draggable.droppable);

  console.log(event.type);
  /* Any thing you want to do onDrag */
};

draggable.onDrop = function (event) {
  console.log(draggable.droppable.dropbox) // HTMLElement where drag-box is dropped
  console.log(event); // MouseEvent or KeyboardEvent
  .
  .
  /* Any thing you want to do onDrop */
};

/* Other Methods */

Example : JSFiddle Link

If you liked this. Give this repo a ⭐ STAR ⭐

License