Cyboide

Seems to work great in Opera now. Thanks.

Hi, I don’t know about redon’s bug, but Draggable 0.9.8 doesn’t work much in Opera (at least Mac, Opera 12.x). Even in the greensock demo. It’s not moving at all. But I know the onDrag, onDragStart, etc., are being detected and triggered because of the project I’m working on.

But, in the case of a reverse(), the invalidate solution doesn’t work if the tween to invalidate isn’t the last item in the Timeline object, since the targeted graphic would jump to its newly set value until its tween’s turn has arrived in the Timeline. So if it is of interest, a simple solution inspired by Carl’s second answer: var tl, moveTween; var makeMoveTween = function () { var pos = /*calculate new value*/; moveTween = TweenLite.to(".target", 1, {left:pos}); }; // Start Timeline tl = new TimelineLite(); makeMoveTween(); tl.to(/*whatever*/) .add(moveTween) .to(/*whatever*/); // ... Then, some time later makeMoveTween(); tl.reverse();

Yes, the invalidate() on a specific tween is what I was looking for. I don’t have much experience with Timeline ; I had tried the invalidate before, but on the entire TL. Thanks guys.

Hi there, For a Timeline object, I would like to know how to change some initial values before calling reverse(). Lets say one of the TL’s tweens is moving the top CSS value of a graphic, a to() taking its current value (lets say 0) to 100. So the TL plays all the way. Then, at some future point, a reverse will be used, but this time I don’t want that specific tween to go back to 0, but say, to 40. So now if I do TL.reverse(), it just doesn’t go where it should, and that’s why I need to change the target value the TL has in memory. Is this possible?

Right now I have to change the CSS cursor style of the object directly, on top of vars.cursor. I guess it is not much of a hassle. Draggable.get(object).vars.cursor = "e-resize"; object.style.cursor = "e-resize";

Ok I see what you meant by "next interaction" ; sorry. In my project I use a "n-resize" (arrow down) to show the user you can drag that object downward. Then, the object (well, it’s parent) is rotated -90°, so that the dragging now occurs on the other axis. So I change the cursor for the "e-resize" (arrow pointing horizontally). But this is not very user-friendly, since the user, before actually clicking, sees an arrow pointing in the wrong direction. Is there anyway I can force the style to update right away?

Well... it is not working. I traced the Draggable object in the console after applying the change, and the cursor prop is indeed changed, but the cursor, visually, doesn’t really change when interacting again with the object.

Cool, thank you Jack!

Hi, Is there a way to change the cursor option of the Draggable object after it is created?

Yep, thanks for the info.

Hi, I was just wondering, seeing the way other libraries are made and used, like jQuery, Modernizr, Raphael (I think), etc., if conflicts could not happen at some point ahead, between GSAP and other libraries. For example, using Modernizr has to begin with their name. Modernizr.functionName. For jQuery, it is the usual $.doSomething. As to prevent conflicts. For GSAP, it is sort of all global packages. And the way Javascript works... Because it is not only TweenMax/Min and Timeline, but also all the plugins and utils. It’s starting to be a lot of globals with their own names. Maybe (unless I see it the wrong way??) in some future release, could, or should, the GSAP be used something like GS.tweenMax.to(); GS.draggable... etc. (Or maybe I don’t understand what you did to prevent conflicts)

OK thanks.

Works great. Good job!

Well, I guess you are absolutely right. Right now I don’t know why it worked before the rc4. But here is a fiddle: http://jsfiddle.net/Cyboide/uRvqZ/ Only the middle one, this time, is a btn. When you click on it with the mouse, you can see it turns blue. (just click it back to remove the blue) So my point is, on iPad (for example), you can try to click (tap) it however you want, it won’t work, the click event does not passes through. The dragging works fine though.

Hm, I guess you did not understood, nope. So here is a jsfiddle: http://jsfiddle.net/Cyboide/cRVCe/ Now, on the right are btns. Start a drag from over a btn, then release the mouse on the left column: ok. But, start a drag from over a btn, then release the drag with the mouse still over the same btn (it doesn’t matter if the mouse went off the btn in between)... You see the click happening (a js alert). The worst is when this action is a link leading to another page... [Edit: it now uses the rc5.]

Hi again, With the rc4 pre-release for tests, apparently the e.click proposed is not present. Though I add it back to try, now it doesn’t seem to be working... You have made many changes for that 0.9.1, so, for my part, I don’t know what to propose now...

OK I’ll come back to you as soon as I tested it...

Yes, on Mac (OS 10.6, don’t have Lion yet) Chrome, FF, Safari, and iPad (iOS7), Android 4.2 (phone), select are working great with Draggable. On Windows 7 Chrome and FF too. Good job. I did not yet test on Windows 8. On Windows 7 IE 10, the select does not work. But there is a Javascript error (whenever I click), so it might be related: "Unable to get property 'length' of undefined or null reference." .. on this line of code, 254 : _isMultiTouching = (_dragCount < e.touches.length);

Well, for that problem I must admit I don’t see any changes...

I was referring to a setup "mouse & touch capable" of a Windows 8 computer. Specifically, I tried it on a laptop with a touch screen, on IE. When using the mouse (or more precisely the tracking pad), it reacts fine. But when using my finger directly on the screen, the Draggable did not respond at all, it did not start. I can assume it as to do with MSPointers, and that on such a setup the mousedown is not simulated like most touch-only devices.

Hi Is it possible to know approximately when the draggable utility compatible with windows 8 will be a available? Thanks.

Hi, In the current Draggable utility, buttons inside the draggable (or scrollable) content are being triggered when the mouse starts on a specific button AND is released on that same button. It is more obvious when testing a div with an onclick event added to it. In the demo the bug is also present, in the Scroll (Drag & Flick) part, on the tiny a tag for the Greensock membership link. But on a tags, it is more difficult to trigger the bug. For now I had to resort to a patch using onDrag and onDragEnd, showing an invisible 100% width and height, transparent div on top (when onDrag) of the content, and of course removing it onDragEnd. In theory (??) a click event cannot be prevented (when using a mouse), since it comes from both a mousedown followed by a mouseup... But still, I wonder, is the Greensock team working on that problem for future releases?

Hi, Apparently select elements are ignored in a Draggable object, they are not triggered at all. In the 0.9.0 version of Draggable.js, input fields are now working properly ; so I just added "select" to the _clickableTagExp property (the "check list" allowing a tags, input, button, etc. to be triggered). However it does not seem to be enough. The select element is being triggered, but the dragging sort of sticks to the mouse. Any idea on how to solve this? (Or are you already on it...)

Hi, I recently began implementing Draggable in a web app, I just love it! Yet I had a couple of bugs. One of them is, in iPad, some btns inside de scrollable content didn’t trigger at all ; they are DIV elements with a mouse event attached to them. I didn’t like the data-clickable patch because it requires to change the existing code here and there although it worked. So this bug (??) was simply resolved when e.click is added in the _isClickable function, version 0.9.0 (dowloadable from a previous answer). Apparently, the e.onclick will not recognize an event added with click (from addEventListener). _isClickable = function(e) { return (!e || !e.getAttribute) ? false : (e.onclick || e.click || _clickableTagExp.test(e.nodeName + "") || e.getAttribute("data-clickable")) ? true : _isClickable(e.parentNode); }