Create simple drag-n-drop feature using Vanilla javascript – dragndrop.js

In this tutorial I am going to share awesome library written in Vanilla javascript – dragndrop.js Pure JS drag-n-drop for any binded DOM element. You can mixin behaviour with lib js-resizable. This plugin enables you to drag DOM elements within a boundary you specify.

Integrate drag-n-drop feature using Vanilla javascript – dragndrop.js


Include plugin’s library on page.

<script type="text/javascript" src="dragndrop.js"></script>


Here is the sample html where drag and drop will work.

 <div class="outer js-dragndrop-limiter">
        <div class="inner inner--1 js-dragndrop js-dragndrop-limiter">
            Content A
                sub div
            <div class="inner inner--2 js-dragndrop">
                Sub-content A
        <div class="inner inner--3 js-dragndrop">
            Content B


Styling dragable element with background boundaries.

        .js-dragndrop {
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        .outer {
            display: block;
            position: relative;
            width: 640px;
            height: 480px;
            margin: 20px;
            background-color: #EEE;
        .inner {
            display: block;
            position: absolute;
            min-width: 100px;
            min-height: 50px;
            padding: 20px;
        .inner--1 {
            left: 100px;
            top: 100px;
            width: 300px;
            height: 200px;
            background-color: #b1b1ff;
        .inner--2 {
            left: 100px;
            top: 50px;
            background-color: #92f192;
        .inner--3 {
            left: 400px;
            top: 200px;
            background-color: #ec7777;


Initialize the drag and drop plugin’s function.

 <script type="text/javascript">

See live demos and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.