iDad5

Oh **** thank you for your patience. Now I see it! what I meant to do with that '[0]' was to put it at the end of the whole line, not inside the Dragabble.create() - my only and weak excuse is my hate for those inline callback function and therefor my inexperience. I owe you . Here is a CodePen for version 1 (working on getting the fonts (and icons right): https://codepen.io/mdrei/pen/GRNNyOL?editors=1111

And I do know that you don't have to teach me - and am very grateful that you try.

I don't understand sorry. It does not return anything (or undefined as you point out) in version 1 too. And as the function is called, I cannot see where its. return value is used? What difference does it make that the first (and only) instance of the obviously successfully created Draggable(s) is assigned to a never used property, or h arry wit this one element?

Thanks @Zach, just to be sure: I know the Whole programming we are taking about was quite hasty and I already have not only the one old version work but also a better structured (at least more to my liking) version that runs smoothly. Back to the (theoretical) issue at hand: I know you are a god of programming compared to my humble self, but still I dare to have my doubts there. ? 1. react2VolumeHandleMove returns noting and receives only 3 numbers via GSAP 2. As it wasn't usable, due to my ****** work, I do not use the volumeHandle property anywhere, so the fact hat in case one I assign the whole arry to it and in case 3 only the fist element shouldn't matter. (?) 3. Besides that one line quoted in my last post everything else (aka my bad code) ist exactly the same in all three versions. Therefore by my thinking all the difference in the whole thing must be caused by the way the (in the end) anonymously instantiated Draggable instance is created. (Or do I have a logical flaw in my thinking here?) As I am really interested in solving that puzzle I will try to create it in a or better three CodePens. Thank you again for your support.

Ok, I did surgery and cut out the troubled piece and placed it in a lonely page so that you can examine it... While doing so I found a third variant :-/ Background: What your going to see is part of a (German) website, an ongoing non-profit cultural project about a literary figure. The whole site is a replacement for a PHP4. website with some Flash from years ago, that went totally out of business some weeks ago... So I've thrown together a wordpress based site as replacement and a video and text animation replacing a small Flash element much liked on the old site. I wanted to build a HTML5 video player from scratch (with draggable handles) for a while and tested out the concept in the element in question in parts, but in a little hurry. Under https://dev.thewebworks.de/debug/ you will find three variants of that element. One working, one not working at all and one breaking when dragging the volume handle. (You have to start the animation and hover over the volume icon in the lower right corner...) Sorry I couldn't provide those in a CodePen each, I just not proficient enough with the CodePen stuff and it would know how to make it work, if you cannot work with the links I'll be happy to send you a zip or even give it another try with CodePen. All three share exactly the same (rusty) programming save one line (and changed class-names not to confuse VS-Code). That line in the 'initVolumeControls' method is: working: this.volumeHandle = Draggable.create('#walk-volume-handle', { type: 'y', bounds: jQuery('#walk-volume-handle').parent(), onDrag:function(){ walk.react2VolumeHandleMove(this.y, this.maxY, this.minY); throwing an error on initializing (not working): this.volumeHandle = new Draggable('#walk-volume-handle', { type: 'y', bounds: jQuery('#walk-volume-handle').parent(), onDrag:function(){ walkB.react2VolumeHandleMove(this.y, this.maxY, this.minY); throwing an error and breaking when dragging(partly working): this.volumeHandle = Draggable.create('#walk-volume-handle', { type: 'y', bounds: jQuery('#walk-volume-handle').parent(), onDrag:function(){ walkC.react2VolumeHandleMove(this.y, this.maxY, this.minY)[0]; I'm rather sure that something with the scope of the anonymous onDrag function causes this behavior and I freely admit that one reason why I like to avoid those is, that in even in mildly complex situation understanding the scope sometimes makes my head explode. Revisiting my hastily built stuff to isolate it for you I am sure that there are better ways to built this starting with the DOM and CSS. Also I regained a better understanding of gsap by now - I grew rusty in recent years. Still I am very curious how those three seemingly identical ways of trying to do the same thing have three different outcomes. Please enlighten me.

First of all I really appreciate your taking the time to care for my small troubles. And I do understand how hard it is for you to troubleshoot blindly. As I have a working solution and my problem only occurs (as far as I know) in the under my specific circumstances. (it did not in my simplified CodePen example I'm not sure if it is worth more of your time. I'm a great fan of greensock since the early flash days and in case you suspect that what i stumbled upon might help solve a hidden problem I more than willing to build one or better two versions of my project striped down for you to debug. That is what I suspect (although I have to admit I was to lazy [or to shy ] to check the source code for my self). No I didn't before, as I host the library myself (old ways and the European privacy laws...) I just embed the plugin file. Worked well so far. After you suggested it I did call registerPlugin, but it didn't change a thing. Thanks again for your great work!

Thanks a lot for your answer. No I don't. I call everything from an inti function that is is called by jQuery document.ready. Not a lot of things would work otherwise. No error happens if i use Draggabel.create() instead of New Dragable. Everything else is exactly the same. All works well using create nothing with the constructor. And there is exactly one target HTMLnode ('#id'). I'm satisficed with my working solution I just don't get it why it would not work with the constructor.

There are no real issues there, thanks. Unfortunately when I tired to incorporate the "new Draggable" variant in my more complex programming instead of Draggable.create() I got a "Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined" console error from Function 'Ja'. I still wonder is there a way to retrieve the actual Draggable instance of a Draggable that was created with Draggable.create(); ? But as I have at least two work arounds it's not a pressing matter at all for me. If someone with deeper understanding of the Draggable programming could add a more in depth clarification to the docs about the return types and the differences between new Draggable and Draggable.create() I would welcome that a lot.

Thank you Jack for your answer. First of all I have to report that I made a CodePen (my first) and I got it to work the way I wanted and expected. to 1: I thought exactly that way, but I found multiple answers that suggested that create() would be the same as the constructor and as both worked / not worked the same way for me I grew uncertain. And create was said to be the preferred method of creating a Draggble (?) The documentation is - at least for me - not to clear either. to 2: I did (https://codepen.io/mdrei/pen/jOVqdWv) and it worked. I have to see if there is something I couldn't fin in hours of searching in my code that was wrong, or if my setup (locally hosted gsap) is buggy in a strange way. to 3: I resorted to Draggable.get('#id').y in the end, but just wanted to understand... THX again

Hey @mikel, tanks a lot, I see what you are doing. But actually that wasn't what I wanted to know. It wasn't so much about the actual problem (I solved it an other way already). I don't like the concept of anonymous functions a lot. so what I like to do is this; (TypeScript, but applies to pus JS also - I ) class DragExamle{ private dragHandle : Draggable; constructor (id: string){ //this.dragHandle = Draggable.create('#'+id, {type: 'y'}); this.dragHandle = new Draggable('#'+id, {type: 'y'}); document.body.addEventListener('click', this.getDragY); } private getDragY = (e:Event) => { console.log(this.dragHandle.y); } } according to my understanding that should work, and the otherwise excellent type-definitions seem to think the same. Still i get logged 'undefined'... (the line I out-commented works the same as the following line, but I would need to typecast it for the definitions - but in the end it gives the same problem.) The concept works for Tweens and Timelines just not for draggable. So my question is: am I making a (conceptual) mistake here or is it simply that the Draggable class is missing some functionality it should have or simply is implemented an other way...

Hi, I don't know if I'm just not finding my error or if I try to do something that just isn't meant to be. I try to build a volume-control for a video with a Draggable element (aka 'the handle') being moved up and down inside a container that is responsive. Everything works just fine - but as the user changes their browser window the size of the 'track' changes. Draggable takes care that even after that change the handle moves correctly (cool!) but as the position of the Draggable.target (the handle) is fixed absolutely the relative position of the handle inside the track (that also indicates the current volume) is wrong. What I would like to do is correct that position from outside like that: var handle = Draggable.create('#handle', {...}); //that works - kind of and later on to calculate the new position inside my delayed window-resize handler: let oldPlace = handle.y hoping to move handle.target later to the required (just calculaded) position. already the first step gives me undefined... (I also tried "new Draggable()" instead of "Draggable .create()" to no avail). I like to work in Typescript and structure my classes a bit. I hate to write lots of anonymous functions. It works fine with tweens (or gsap) and timelines to store them in private members in my classes and call them from any method inside. Not so with Draggable. Any ideas?

Would be interested in that answer too.