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

Everton da Rosa

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

Level 2 StarStar

 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

Downloadrapiddnd-2015-06-26.zip 1KB
Downloadrapiddnd-2015-06-26.tar.gz 939
 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
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.