Search the Community
Showing results for tags 'draggable'.
-
I have 2 draggables drag1 - type:"scrollTop" & drag2 - type:"scrollLeft" On an ipad I notice when dragging horizontally the page jiggles vertically. o stop this I disable drag1 on DragStart of drag2. This is all fine but … When I enable drag1 on DragEnd of drag2 the content of drag2 snaps back to it's starting position. This error occurs on both the iPad and chrome osx. As I understand it this should work just fine - any pointers to what is going on or how to get around it would be greatly appreciated. Matt
-
I touched on this in a previous posts but am still to find the perfect solution for mixing Draggable dragging/scrolling with native browser scrolling. 1. Open the attached Codepen 2. Emulate touch events - open Chrome inspector and emulate a device such as a Nexus 5 3. Alternatively view the Codepen on a device 4. Alternatively view the screen cap below Basically, you will see that it isn't possible to scroll the page vertically when the drag starts on the Draggable carousel (blue blocks). I've examined Draggable.js source code but I can't figure out where you the relevant scroll / touch event are being intercepted. Could you point me in the right direction? I know one work around is to use a second Draggable to control vertical scrolling but this isn't an option for us, we need native browser scrolling when scrolling vertically.
-
I have a site that lets users drag through a series of pages horizontally. When they reach the end of a series of pages and they drag the container, the edge-resistance kicks in. As they continue to drag against the resistance, the container still moves to the left revealing the background behind. This is how the site is supposed to work. This is how it used to work a few months ago. Now what I see is different. When I drag past the right edge, I can see that the scrollbar is "stretching" indicating the edge-resistance is working. However, the container does not move past the edge. It seems like the transform: translate3d() is not working. I can see the number growing in ie translate3d(-1px, 0px, 0px) -> translate3d(-2px, 0px, 0px). But the container is not moving. Did something change? I first noticed this problem in Firefox, but with the latest version of Draggable, I see it in Chrome, too (it still works in IE). Here is a simplified demo: Codepen URL: http://codepen.io/stephendlei/pen/azQaPb Dragging the first (green) block past the left edge produces the desired result. But moving the last (red) block past the right edge does not. The red block doesn't move and the gray background is not revealed. Note: If I cut down the number of blocks to just 1, the behavior will work as expected. Is there something I'm doing with the inline-blocks that is causing issues? -
I have just had a look at the new auto scroll feature. (it looks great as does direction) Would it make sense to include the option to auto scroll on throw ? Currently if you throw the draggable object it disappears of the page. Sure I could adjust it myself on throw update but it seems to me like a nice option to include. Matt
-
I'm trying to use the amazing Draggable plugin to create a re-orderable list of items in AngularJS. The implementation was easy to set up on static data, but when I switched to dynamic data using ng-repeat, there are z-order issues for any items dragged down the list. [see codepen] I attempted to manually set the z-order of the element, but that didn't change anything. I realize this is more of an 'angular' thing than a 'draggable' thing, but I was wondering if anyone has any potential solutions?
-
Hi! I have noticed that if I have a draggable element with throwProps:true and throwing it will stop animate if I call the enable() function while the throw animation is still active. What im trying to do is that I have nested draggables that needs to call disable and enable at a specific time and dont want to break the animation if its still going. I looked at the Draggable.js source code and in line 1718 does the animation to stop. TweenLite.set(target, {x:"+=0"}); //simply ensures that there's a _gsTransform on the element. I wanted to let you now what I found and maybe its better that you guys does the change in source code if you think this is something to change. The disable() function works as i should. Thanks!
-
Hello I like Draggable a lot! Question: is it possible / will it be possible to drag an object along an svg-path or canvas-path or within an non rectangular svg-shape / canvas-shape
-
Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.
-
Is it possible to disable the drag of a Draggable, but not the click?
-
Is there a way to change the click test from 3px to something greater? I'm finding in Android browsers that a Draggable object is hard to click because it has a tendency to move a very short distance when I tap the field. On most mobile browsers, 3px is extemely tiny because of retina displays, thus a larger pixel range would be beneficial.
-
I've just discovered that Draggable will clash with contenteditable="true" elements in a way that: it sometimes puts edit cursor at the beginning of the editable element most of the time it prevents editable content to be edited, except when it contains clickable elements, like A, INPUT, BUTTON... Example: http://jsfiddle.net/9j2r56md/ ... in the example, there are 2 boxes, both enhanced via Froala Editor which basically just adds a DIV with contenteditable="true". First div has data-clickable="true" on the draggable container DIV, so the DIV is not draggable but the issue is still visible. The second one has an additional strange behaviour, as it starts to drag the box when the contenteditable="true" element is clicked. An updated version is available here that just adds one extra DIV with contenteditable="true" only, so it's obvious that it's not a Froala thing: http://jsfiddle.net/9j2r56md/1/ -
I have the basics figured out from following the brilliant docs, thanks for that. I am stuck however. I would like the nav in my example to be draggable only to the top and only by about 45 pixels. When it reaches 45px you shouldn't be able to drag it any further and then on release obviously it tweens back to where it started (but that I have working already). It would be cool if I can have the edgeResistance kick in as well close to the end of the drag but it's not required. It should be easy but I can't get my head around how I will achieve this.
-
I've little experience with HTML5 and Javascript. I've only built sites with templates, and I'm attempting my first project that really requires a site built from scratch. I want to use knobs to sort images based on the knob setting, so I've got the draggable knob up and running, now I'm wondering how to even search this forum for answers on how to capture the knob's new position as a variable I can use to sort some images. I've got some examples of image sorts by tab pushes, so what I'd like to do is capture the knob's position after the user rotates it, set a variable and when the user presses sort, insert the variable value to duplicate the effect of a tab push. I'd appreciate any links to tutorials or documentation I can read that is specifically about this kind of task. Best, Marc
-
Hello! I have a little problem with Draggable Plugin and the snap option. draggable = Draggable.create(__that.$slideshow, {type:"x", edgeResistance:.5, throwProps:true, lockAxis : true, bounds:__that.$bounds , snap: { x: function(_x) { var newX = (_x / __that.totalFlowWidth) * __that.totalFlowWidth; return newX; }, } }); In the above example, totalFlowWidth represents the total width of my container. The problem is that the value are correct but the snap tween is not launched in the return. When i put a number instead of variable newX, it works. When i switch to newX (which return a number value), nothing happens. It's very weird. Need some help. Thx
-
Any clue on how to enable the throwProps plugin found in the Shockingly Green library set of Greensock. The momentum scrolling in the feature found on this site works exactly the way it should on iOS http://greensock.com/draggable The scrolling example I've attached has no momentum or inertia when viewing on an iOS device. Ive easily been able to get other libraries to work with no hick-ups but this scroller feature has been bugging me. I'm sure it's something super simple and I'm just overlooking. The current libraries i'm calling are Draggable, Throwprops, TweenMax. Using Edge Animate 2014.1.1 Any thoughts? [edit: files removed that included bonus plugins]
-
Hi all, I am looking for a custom scroll bar with Draggable Scroll. For simulate a scroll like mcustomscrollbar or iscroll and keep the touch fonction for mobile. I don't like the native scrollbar, i am looking for a thin/cute bar who appear only on mouse move. Anyone have something like this ? I have see : http://codepen.io/MAW/pen/WbvOrM But not working on FF/IE Thanks for reading
-
Hello GreenSocks, I cannot get syncing / resetting a draggable to work. Please, see my pen. The red dot is a (Draggable) slider. When user changes number of control points, I remove the transform on the target and call Draggable.update(). But unfortunately, the x property remains the same. Would be great if you could have a look at it! Roelof potatoDie
-
Hello, I was wondering how could I limit a draggable movement only diagonally towards top-left and bottom-right. Thanks guys!
-
Draggable. Custom startDrag(). Cant get it work for touch devices
sumimasenga posted a topic in GSAP
Hi! I am building a global velocity tracker that runs as soon as you move your mouse or touch. Im using the Draggable plugin where I call the startDrag method in a mousemove touchmove jquery callback and passing the corresponding event to the startDrag method. Everything is working fine on a computer but when using a touch device it doesnt work. Like if the startDrag never is called. Can you see if I have missed something... I have tested with ipad air 2, ipad air mini, iphone 4s all with ios 8.1 and its not working. Check out the codepen. Thanks for this great library!! //Robert -
Is it possible to have natively vertical scroll elements within a horizontal Draggable element?
-
Hello All! So I'm trying to use a Rotation Draggable to control a timeline. I found this topic: http://greensock.com/forums/topic/8842-draggable-parallax-effects-in-edge-animate/but it's for a linear draggable. I tried imputting that code and changing a few things around to make it work with rotation, but I'm afraid my coding capabilities are woefully underdeveloped. If anyone could help out, I'd greatly appreciate it! -mlovett
-
Check out the Codepen and you'll notice that you're able to drag the octopus to the left a bit before the bounds stop you from going further. You can't go to the right at all. After you let go, you'd expect to be able to drag it to the right (back to where it started), but it seems as though the bounds reset based on the image's relative position. When you drag it, you can't go to the right, but you can go further to the left than you originally could. Thanks for your help!
-
Hi everyone. Just wondering, if It is possible something like: Draggable.create("#myObject", {type:"xPercent,yPercent"}); or Draggable.create("#myObject", {type:"leftPercent, topPercent"}); Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?
-
Hi, I'd like to replace jQuery's draggable by GreenSock Draggable (possibly with throwprops), but it seems it doesn't have a on-drag-event. Is that right? BTW, I would like it very much if the documentation of the utilities mentions dependencies.
-
Hello, Is there any existing method in create() of setting up events triggered when Draggable objects have mouse over / out? Thanks!
