Draggerjs (not publish yet)

is a pure vanila javascript without dependency which is use to drag and drop elements in easy and understabdable way.

Installation(not publish yet) #

npm i draggerjs
Imports #

import Dragger from "draggerjs"
Getting Started #

we are getting started using draggerjs.

<div className="drag-container" id="drag-getting-started">
<div className="drag-around n-border-color">
<div className="draggable-box center n-flat">
<h1>Drag Me</h1>
</div>
</div>
</div>

Drag Me

Autoscroll #

you can easily apply autoscroll in the draggerjs just add autoscroll: true in the options.

<div className="drag-container drag-long-ground" id="drag-autoscroll">
<div className="drag-around n-border-color">
<div className="draggable-box center n-flat">
<h1>Drag Me</h1>
</div>
</div>
</div>

Drag Me

Raw Draggable #

you can create with your own drag mechanics.

<div className="drag-drawer" id="drag-raw-drag">
<div className="drag-drawer-content n-no-shadow n-engrave">
<nav className="n-nav n-nav-flat n-nav-column">
<a className="n-nav-link" href="#">link-1</a>
<a className="n-nav-link" href="#">link-2</a>
<a className="n-nav-link" href="#">link-3</a>
</nav>
</div>
</div>
Droppable #

you can use droppable as well.

<div className="drag-container" id="drag-droppable">
<div className="droppable-area n-no-shadow n-border-color">
<div className="draggable-box n-no-shadow n-flat">
<h1>1</h1>
</div>
<div className="draggable-box n-no-shadow n-flat">
<h1>2</h1>
</div>
</div>
<div className="droppable-area n-no-shadow n-border-color"></div>
</div>

1

2

remember

When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.

Cloning #

you can clone as well.

<div id="drag-cloning" className="drag-container">
<div className="droppable-area n-no-shadow n-border-color">
<div className="draggable-box n-no-shadow n-flat" id="draggable-1">
<h1>1</h1>
</div>
<div className="draggable-box n-no-shadow n-flat" id="draggable-2">
<h1>2</h1>
</div>
</div>
<div className="droppable-area n-no-shadow n-border-color">
<div className="draggable-box n-no-shadow n-flat" id="draggable-3">
<h1>3</h1>
</div>
<div className="draggable-box n-no-shadow n-flat" id="draggable-4">
<h1>4</h1>
</div>
</div>
</div>

1

2

3

4

remember

When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.

Switching #

you can do switching as well.

<ul className="switching-area">
<li className="switching-box n-no-shadow n-flat-low" data-index="1">
<h5>Apple</h5>
</li>
<li className="switching-box n-no-shadow n-flat-low" data-index="2">
<h5>Peach</h5>
</li>
<li className="switching-box n-no-shadow n-flat-low" data-index="3">
<h5>Orange</h5>
</li>
<li className="switching-box n-no-shadow n-flat-low" data-index="4">
<h5>Grapes</h5>
</li>
<li className="switching-box n-no-shadow n-flat-low" data-index="5">
<h5>Banana</h5>
</li>
</ul>
  • Apple
  • Peach
  • Orange
  • Grapes
  • Banana
remember

When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.

API

Dragger #

Argument
Argument
Type
Type
Default
Default
Description
Description
new Dragger(
container,string | element | node-it is the container or the playground of the Dragger.
)
Dragger Methods #

Method
Method
Return
Return
Default
Default
Description
Description
Instance.destroyvoid-it is use to destroy and kill the Dragger.
Event Properties #

Property
Property
Type
Type
Default
Default
Description
Description
typestring-it is event type.
preventDefaultmethod-it is use to prevent default.
stopPropagationmethod-it is use to stop the propagation.
originalEventobject-it is the original event
clientXnumber-it is the x position of the cursor in window
clientYnumber-it is the y position of the cursor in window
startXnumber-it is the start x position of the cursor in container.
startYnumber-it is the start y position of the cursor in container.
moveXnumber-it is the current x position of the cursor in container.
moveYnumber-it is the current y position of the cursor in container.
endXnumber-it is the end x position of the cursor in container.
endYnumber-it is the end y position of the cursor in container.
isDraggableElementboolean-it indicates if the targeted element is draggable.
targetelement | node-it is the element which is targeted.
containerelement | node-it is the element container.
droppable (dragover, dragenter, drop)element | node-it is the element inside droppable container where the target is landed. it might be the children of the droppable container.
currentDroppable (dragover, dragenter, dragexit, drop)element | node-it is the droppable container element which you want to drop (dragenter), you fail to drop (dragexit) or you dropped (drop).
Warning!

In this pre-deployed stage, most of the library you will witness has yet been publish or update in npm.