JS Rapid Drag and Drop: Handle drag and drop events between page elements

Recommend this page to a friend!
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 58%Total: 150 All time: 332 This week: 3Up
Version License JavaScript version Categories
rapiddnd 1.0GNU General Publi...3.0Utilities and Tools, Events
Description 

Author

This object can handle drag and drop events between page elements.

It can initialize two Web page elements so one can be dragged and dropped over the other.

The dropped elements are removed from their containers and become children of the drop target element.

Picture of Everton da Rosa
  Performance   Level  
Name: Everton da Rosa <contact>
Classes: 7 packages by
Country: Brazil Brazil
Age: 43
All time rank: 506 in Brazil Brazil
Week rank: 6 Up1 in Brazil Brazil Up
Innovation award
Innovation award
Nominee: 3x

Winner: 3x

Example

<!DOCTYPE html> <html> <head> <title>CodePen - RapidDnD</title> <style> /* Prevent the text content of draggable elements to be selectable. */ [draggable] { user-select: none; cursor: move; } #left { border: black solid thin; width: 100px; height: 100px; float: left; } #right { border: black solid thin; width: 100px; height: 100px; float: right; } </style> <script type="text/javascript" src="dnd.js"></script> <script> window.addEventListener('load', function(evt) { var right = document.getElementById('right'); var left = document.getElementById('left'); for (var index = 0; index < left.children.length; index++) { DnD.init(left.children.item(index), right); } DnD.setDroppable(left); //possbilita arrastar de volta os itens. Também permite arrastar e soltar dentro de left (reordenar) console.log('DnD started'); }); </script> </head> <body> <div id="left"> <div id="1">Item 1</div> <div id="2">Item 2</div> <div id="3">Item 3</div> </div> <div id="right"></div> </body> </html>

  RapidDnD on CodepenExternal page  
  Files folder image Files (2)  
File Role Description
Plain text file dnd.js Class Main class file
Accessible without login Plain text file sample.html Example Sample for use

 Version Control Unique User Downloads Download Rankings  
 0%
Total:150
This week:0
All time:332
This week:3Up
 User Ratings  
 
 All time
Utility:83%StarStarStarStarStar
Consistency:83%StarStarStarStarStar
Documentation:-
Examples:83%StarStarStarStarStar
Tests:-
Videos:-
Overall:58%StarStarStar
Rank:40