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

Libraries

Include plugin’s library on page.

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

HTML

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

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

CSS

Styling dragable element with background boundaries.

JS

Initialize the drag and drop plugin’s function.

 <script type="text/javascript">
        dragndrop.initOnDocumentReady();
    script>

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.

Related