roman999
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by roman999
-
-
56 minutes ago, Cassie said:
Really not sure what you mean by 'the event listeners are not attaching'
Are you sure the JS is actually running? Can you console log through and work out where it's going wrong?You can see what I mean in the screenshots I posted earlier in this thread. When I ran the sorter outside of my code, the
ondragstart
method on one of thelist-items
shows a proper value. When run inside my code, it shows_emptyFunc
. If the sort code wasn't running,ondragstart
would benull
but I confirmed the code is running via browser Developer Tools's debugger.Draggable
doesn't seem to be setting thelist-items
event handlers properly in a certain context but I'm not sure what context to change. Hopefully a minimal demo will clarify things but it's going to be some work.Cassie, you're being a great help, I really appreciate it.
-
Well I'm not sure what to do. I copied the css and ts over but the event listeners still are not attaching. Maybe I need to create a new codesandbox containing the minimum code necessary to demonstrate the problem yet exhibiting my configuration.
-
2 hours ago, Cassie said:
Hey @roman999
https://codesandbox.io/s/headless-fire-cvbtm?file=/src/index.ts-
No need to import from 'dist' with ES Modules. Just
import { Draggable } from "gsap/Draggable";
Thanks Cassie! I used the
dist
directory to dispose of this Jest error that occurs when using theimport
as you showed. Any idea what is going on?/home/kev/control/programming/ts/quiz/node_modules/gsap/Draggable.js:16 import { getGlobalMatrix, Matrix2D } from "./utils/matrix.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 5 | import {sort} from '../jsonOut'; 6 | import {gsap} from 'gsap'; > 7 | import {Draggable} from "gsap/Draggable"; | ^ 8 | export class Sort implements Exercise { 9 | inst=""; 10 | ans=[]; at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) at Object.<anonymous> (src/ts/main/exercise/sort.ts:7:1)
-
No need to import from 'dist' with ES Modules. Just
-
14 hours ago, OSUblake said:
Are you registering the plugin? If you're having issues, can make a demo CodeSandbox, which allows for imports and TypeScript?
I did register the plugin, I neglected to add that line in the code above. I worked on CodeSandbox:
https://codesandbox.io/s/little-star-jvkox
I don't know if the *.ts file is actually being called or if the sandbox is publicly viewable. The behavior is the same as I see locally, but I had to make some minor adjustments to get it to display the HTML and show the *.ts file without errors. There's still two issues involving
this
but I think they won't prevent compilation.Contact me through codesandbox and I'll make you an editor if you're willing to explore this more. I suspect a problem exists with gsap's Draggable when used as a module.
-
-
18 minutes ago, OSUblake said:
You are inspecting an element, which has similarly named event handlers, but those aren't the same events as Draggable. You should be inspecting what Draggable returns, i.e.
dragger
. The event handlers will be in thevars
object.I attached three screen shots:
- The es6 vars object, as you requested.
- The js vars object, for comparison. It appears to be identical.
-
The js version of the screenshot posted earlier, showing the
onDragStart
event ofelement
. It shows a function there. Since GSAP ultimately must set events on dom objects,element
in this case, the screenshot I posted earlier may show a problem.
-
-
-
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; } }
OSUblake's awesome Sortable List With Draggable, five years later
in GSAP
Posted
The problem was a beginner's mistake I made to add another widget:
That apparently reset gsap's event handling code. Adding the proper way,
document.createElement(...)
withdocument.body.append(...)
made the problem disappear.I still don't understand why the DOM DnD event handlers were added in particular situations instead of
emptyFunc()
(which I think cannot be seen by logging since the DOM lacks the necessary tooling) but my immediate problem is resolved. @OSUblake and @Cassie, I appreciate your help.