<!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>
|
Download
