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.
Basic drag-drop
1.) Create an instance.
const draggable = new DragDrop();
2.) Add required attributes to HTML Tags
<span data-draggable> drag-box 1 </span>
<span data-draggable> drag-box 2 </span>
<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();
draggable_1.setDragDropElements({
boxAttr: "data-draggable-1",
dropboxAttr: "data-dropzone-1",
dragboxAttr: "data-dragging-box-1",
});
draggable_2.setDragDropElements({
boxAttr: "data-draggable-2",
dropboxAttr: "data-dropzone-2",
dragboxAttr: "data-dragging-box-2",
});
2.) Add required attributes to HTML Tags
<span data-draggable-1> drag-box 1 </span>
<span data-draggable-1> drag-box 1 </span>
<div data-dropzone-1>drop-zone 1</div>
<div data-dropzone-1>drop-zone 2</div>
------------------------------------------
<span data-draggable-2> drag-box 2 </span>
<span data-draggable-2> drag-box 2 </span>
<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:
-
Move to a draggable element with TAB
key.
-
Press SPACE
key to select the focused draggable element.
-
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);
console.log(draggable.boxToDrag);
};
3) droppable
: Read Only.
const draggable = new DragDrop();
draggable.onDrag = function () {
console.log(draggable.draggable);
};
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",
});
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);
};
draggable.onDrag = function (event) {
console.log(draggable.draggingBox);
console.log(draggable.droppable);
console.log(event.type);
};
draggable.onDrop = function (event) {
console.log(draggable.droppable.dropbox)
console.log(event);
.
.
};
If you liked this. Give this repo a ⭐ STAR ⭐
License
This library is released under the MIT license