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.

htmlcssjs
<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.

htmlcssjs
<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.

htmlcssjs
<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.

htmlcssjs
<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.

htmlcssjs
<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.

htmlcssjs
<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.
options	object	-	It is the options of the Dragger.
)

Dragger Methods #

Method Method	Return Return	Default Default	Description Description
Instance.on	void	-	it is the method to add Dragger event listener
Instance.off	void	-	it is the method to remove Dragger event listener
Instance.destroy	void	-	it is use to destroy and kill the Dragger.

Event Properties #

Property Property	Type Type	Default Default	Description Description
type	string	-	it is event type.
preventDefault	method	-	it is use to prevent default.
stopPropagation	method	-	it is use to stop the propagation.
originalEvent	object	-	it is the original event
clientX	number	-	it is the x position of the cursor in window
clientY	number	-	it is the y position of the cursor in window
startX	number	-	it is the start x position of the cursor in container.
startY	number	-	it is the start y position of the cursor in container.
moveX	number	-	it is the current x position of the cursor in container.
moveY	number	-	it is the current y position of the cursor in container.
endX	number	-	it is the end x position of the cursor in container.
endY	number	-	it is the end y position of the cursor in container.
isDraggableElement	boolean	-	it indicates if the targeted element is draggable.
target	element \| node	-	it is the element which is targeted.
container	element \| 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).

DARK THEME

Draggerjs (not publish yet)

Drag Me

Drag Me

1

2

1

2

3

4

Apple

Peach

Orange

Grapes

Banana

API

Warning!