I am attempting to use the code from
https://greensock.com/forums/topic/14575-how-to-create-a-sortable-list-with-draggable/
while converting to GSAP 3, es6, and Typescript. The old code works fine and I updated it to GSAP 3 syntax, still no problem. However, when I use the code in a Typescript application with imports in the *.ts file rather than script tags in the HTML file the event handlers do not get added. Developer Tools shows "_emptyFunc" (screenshot attached as comment). This use case is incompatible with CodePen, at least without payment, but here is part of my code.
import {gsap} from 'gsap';
import {Draggable} from "gsap/dist/Draggable";
...
addBehavior():void {
const rowSize = 100; // => container height / number of items
const container = document.querySelector(".container");
const listItems = Array.from(document.querySelectorAll(".list-item")); // Array of elements
const sortables = listItems.map(Sortable); // Array of sortables
const total = sortables.length;
gsap.to(container, { duration: 0.5, autoAlpha: 1 });
function Sortable(element, index) {
const animation = gsap.to(element, { duration: 0.3,
boxShadow: "rgba(0,0,0,0.2) 0px 16px 32px 0px",
force3D: true,
scale: 1.1,
paused: true
});
const dragger = new Draggable(element, {
onDragStart: downAction,
onRelease: upAction,
onDrag: dragAction,
cursor: "inherit",
type: "y"
});
// Public properties and methods
const sortable = {
dragger: new Draggable(element, {
onDragStart: downAction,
onRelease: upAction,
onDrag: dragAction,
cursor: "inherit",
type: "y"
}),
element: element,
index: index,
setIndex: setIndex
};
// gsap.set(element, { y: index * rowSize });
function setIndex(index) {
sortable.index = index;
// Don't layout if you're dragging
if (!dragger.isDragging) layout();
}
function downAction() {
animation.play();
this.update();
}
function dragAction() {
// Calculate the current index based on element's position
const index = clamp(Math.round(this.y / rowSize), 0, total - 1);
if (index !== sortable.index) changeIndex(sortable, index);
}
function upAction() {
animation.reverse();
layout();
}
function layout() {
gsap.to(element, { duration: 0.3, y: sortable.index * rowSize });
}
return sortable;
}
function changeIndex(item, to) {
// Change position in array
arrayMove(sortables, item.index, to);
// Set index for each sortable
const order = [];
sortables.forEach((sortable, index) => {
sortable.setIndex(index);
const content = sortable.element.innerText;
order.push(content);
});
document.getElementById("selection").innerHTML=order.toString();
}
// Changes an elements's position in array
function arrayMove(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
}
// Clamps a value to a min/max
function clamp(value, a, b) {
return value < a ? a : value > b ? b : value;
}
}