Thank you for the quick answer!
I'm using the Vanilla version. This is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"></script>
<script src="script.js"></script>
<title>::::::::::</title>
</head>
<style>
*{
font-family: sans-serif;
}
.list-item{
padding: 20px ;
width: 100%;
background: #e0e0e0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
.container{
border: 1px solid red;
width: 324px;
position:absolute;
left: 20PX;
top:100px;
box-sizing: border-box;
}
</style>
<body>
<div class="container">
<div class="list-item">
<div class="item-content">
<strong>Alpha </strong><span class="order">0</span>
</div>
</div>
<div class="list-item">
<div class="item-content">
<strong>Bravo </strong><span class="order">1</span>
</div>
</div>
<div class="list-item">
<div class="item-content">
<strong>Charlie </strong><span class="order">2</span>
</div>
</div>
<div class="list-item">
<div class="item-content">
<strong>Delta </strong><span class="order">3</span>
</div>
</div>
</div>
</body>
</html>
JAVASCRIPT
'use strict';
var sortablesArray;
const gridHeight = 80;
var totalItemsCount;
document.addEventListener('DOMContentLoaded', ready);
function ready(){
const items = Array.from(document.querySelectorAll('.list-item'));
totalItemsCount = items.length;
const container = document.querySelector('.container');
container.style.height = items.length * gridHeight + "px";
drag(items);
}
function drag(items){
sortablesArray = items.map(sortableCreator);
function sortableCreator(element, index) {
console.log(element)
var dragger = new Draggable (element ,{
type: "y,x",
lockAxis: true,
edgeResistance: 0.5,
bounds: ".container",
onDragStart: dragStart,
onDrag: whileDrag,
onDragEnd: dragEnd
});
const sortable = {
'name': element.querySelector('STRONG').innerText,
'dragger':dragger,
'element':element,
'index': index,
};
//posicionar inicialmente
gsap.set(element, { y: index * gridHeight });
const animation_OnDrag = gsap.to(element, {
duration: 0.05,
scale: 1.04,
force3D: false,
boxShadow: "rgba(0, 0, 0, 0.2) 0px 30px 50px -10px",
paused: true,
ease: 0.5
});
function dragStart() {
console.log("start drag");
animation_OnDrag.play();
}
function dragEnd() {
console.log("end drag");
animation_OnDrag.reverse();
gsap.to(element, {duration:0.3, y: sortable.index * gridHeight });
}
function whileDrag() {
var newIndex = clamp(Math.round(dragger.y / gridHeight), 0, totalItemsCount - 1); // yPosition, minValue , maxValue
if(sortable.index != newIndex){
move(sortablesArray,sortable.index, newIndex);
changePosition();
}
}
return sortable;
}
}
function changePosition(){
sortablesArray.forEach((sortable, index) => {
if (!sortable.dragger.isDragging) {
gsap.to(sortable.element,{duration: 0.3, y: sortable.index * gridHeight });
}
});
}
function move(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
array.forEach((el, index) => {
el.index = index;
el.element.querySelector('SPAN').innerText = index;
});
}
function clamp(value, min, max) {
return value < min ? min : value > max ? max : value;
}