
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
drag-drop-plus
Advanced tools
Drag any object in DOM and drop it anywhere in DOM. Works well with Mouse, Touch and Keyboard events. Suuports accessibility to some extent.
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.
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:
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:
data-draggable
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 aclone()
of the element you are dragging.
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.
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()
.
Move to a draggable element with TAB
key.
Press SPACE
key to select the focused draggable element.
To drop you have 2 options :
TAB
key to focus a dropzone
. And then press SPACE
key to drop on focused dropzone.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.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.
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.
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 */
If you liked this. Give this repo a ⭐ STAR ⭐
This library is released under the MIT license
FAQs
Drag any object in DOM and drop it anywhere in DOM. Works well with Mouse, Touch and Keyboard events. Suuports accessibility to some extent.
We found that drag-drop-plus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.