File: sample.html

Recommend this page to a friend!
  Classes of Everton da Rosa   JS Rapid Drag and Drop   sample.html   Download  
File: sample.html
Role: Example script
Content type: text/plain
Description: Sample for use
Class: JS Rapid Drag and Drop
Handle drag and drop events between page elements
Author: By
Last change: Missing });
Date: 9 years ago
Size: 1,121 bytes


Class file image Download
<!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>