Search the Community
Showing results for tags 'draggable'.
-
Hello, I created an example on codepen to demonstrate the problem. Basically the SVG does not obey the bounding rule. Any idea? it works on Chrome. Draggable.create("#svgId", { throwProps:true, bounds: window }); I don't want to enclose the svg inside a div and rather drag the div because I need specific svg click pass-through features which the divs do not allow. Dragging an enclosing div would be a workaround I could not use.
-
Hello, I have an issue involving multiple draggables within the same element (a coverflow of dials). I'd like to not fire the coverflow drag when a user is trying to set a dial. Is there a way to stop the drag via it's onPress function (eg: if the click/touch event's target element is part of the dial, stop the drag)? (This concept seems simple enough not to warrant a codepen, but I can add one if it would be helpful) Thanks in advance, Dan
-
Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
-
I have a Draggable, it is bounded to a container like this: Draggable.create(t, {type:"x,y", bounds:container, throwProps:true, liveSnap: false, snap: { x: function(endValue) { return Math.round(endValue / 38) * 38; }, y: function(endValue) { return Math.round(endValue / 50) * 50; } }}); But I want to shrink the bounds within the container. How can I give an offset to the bounded container? Another approach is to define a dummy container that fits exactly within required bounds, but that's a little more work.
-
Hi guys I'm back at it again with another issue (yay, issues!) Currently I'm still working on the project of which I've already posted something about --> http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div After working a bit on it, I've again hit a wall. Let me just explain the codepen a bit because it can be pretty complicated at first. This is working right now, but only for 1 try. I've you fail somewhere, reloading the page is the best option. I'm trying to make it happen right 1 time so I can make it 'simpler' to change things and make it repeatable (so you don't have to reload) --> http://codepen.io/Mattttt/pen/qdWzog 1) Letters from the topbar have to be dragged on top of the tomate (soupZone) Drag all the letters (b-o-l) to the soup to get the correct results 2) Close the topbar by pressing the (ABC) button 3) Watch the letters animate in the soup 4) A copy of the letters are being animated in the grey zone (wordZone, between the soupZone and the topbar) PROBLEM #1: This animation starts from a weird position because I can't seem to get the coordinates right 5) After the animates, the letters in the wordZone (should animate back to the correct letter in the soupZone) and be deleted. Tiles with a [.] takes their place. 6) Now it should be possible to drag the letters (a copy of it) from the soupZone to the wordZone on top of the correct [.] . PROBLEM #2: When I try to drag the letters, the just move to the topbar because for some reason, they think that they've hit the topbar, which isn't the case. I know my code is kind of a mess, but I was going to clean it up a bit when I've made it work completely. The reason (I think) for both problems is that something is off with the positioning. It seems to look for the relative position instead of the absolute position. It would be awesome if somebody could take a look and help me out. If something is unclear or vague, I'll be happy to assist And if you want to completly refactor the code to make it more readable and other stuff, please don't hesitate!
-
Bonjour, i have some issues when i place a Draggable inside a fixed div-container. It works but mouse-pointer is not extactly over the dragged element. When the div is positioned absolute it's works like a charm? How could i solve this problem? Best, Boris
-
Hi I'm using the Draggable Util to create a spinning wheel, and using the throwProps:true property. When I listen for the snap function, the endValue is being incremented for each spin of my wheel. Is there a way to reset this after each spin? Thanks Dan
-
In the draggable demo, what code would I need to add to get the text 'Drag and throw me' value? - without directly specifying #box1.text(). I've tried using $(this).text() but it returns a blank.
-
Hi there, i need to constrain an element to a convex polygonal object. I made a test with an svg set for the Draggable's bounds, however i had the impression Draggable just used the svg's BoundingBox. Is that so? Any ideas or hints as to how to accomplish this task? Thanks a lot Nadja
-
Hello I was wondering how I can click on children without firing onClick from draggable if child is clicked. also how to prevent Draggable from firing click event if user swipes/drags outside of bounds the onClick event is dispatched. MAC IOS Yosemite Chrome: Version 41.0.2272.118 (64-bit)
-
One nice thing about using an element instead of min/max values for a Draggable's bounds is that the bounds automatically adjust if the bounding element resizes. But sometimes you don't want the bounds to extend all the way to an element's edges, so you have to pass in min/max values. The problem with this is that your bounds won't change on a resize, so you have to manually calculate and apply a new bounds object. What if we could combine the two approaches? There are many times where I want the bounds to be offset just a little bit from it's container, and have to decide between passing in min/max values or creating a new element specifically for the bounds. It would be nice if I could skip this, and just pass in an element with optional min/max values. Consider the following... Draggable.create(".box", { bounds: { target: "#container", minX: 10, maxX: "+=50", maxY: "-=25" } }); If the .box element is 100 x 100 and the #container element is 500 x 500, then the bounds would be calculated as: minX: 10, minY: 0, maxX: 450, maxY: 375 Here's a demo of what this would like in action. The container is in black, and the offset is in red. If you resize the window, it still maintains the offset bounds.
-
First time on Greensock and I'm having a bit of trouble finding the proper documentation to do what I'd like. Basically on creating of the initial draggable I'd like to kick off two draggables at the same time. Example above.
-
Hi guys, I have recreated the problem as the title states. I have a div that has a zoom and a Draggable item inside it. On zoom = 1 everything works great but if you change the zoom the Draggable position is out. While using jQuery-UI Draggable I was able to fix the issue by the following code: var zoom = $("#main").css("zoom"); $('svg').draggable({ drag: function(evt,ui) { // zoom fix ui.position.top = Math.round(ui.position.top / zoom); ui.position.left = Math.round(ui.position.left / zoom); } }); As the x and y properties on the Draggable object are [read-only] how can this be done to fix position with GSAP Draggable? Will appreciate some help. Cheers, Praney
-
I read through the Draggable documentation but did not find an easy way to identify the target cell a draggable object has been dropped into. Is there a simple method to accomplish this? In my example, when the draggable object is dropped, an alert returns the id of the draggable object. What I would like it to do is return the id of the cell the object was dropped into. http://codepen.io/anon/pen/PwvzbJ Thanks, James
-
Hi! Look at these links using a touch device. Im using iphone 4s with safari browser. The problem was working fine in the old draggable build. If I have a draggable object with only type:'x'. I can activate the drag if I move my finger in a vertical direction and then move it to a horizontal direction. But with the latest draggable build it doesnt work. It only activates a drag if the touch is a horizontal direction from the start and I tried with lockAxis:false with no success. Old draggable library (0.11.0): http://codepen.io/anon/pen/bNJPVv New draggable library (0.13.0): http://codepen.io/anon/pen/RNOzap Can you get the same problem? Thanks! -
I'm totally new to Greensock. I'm trying to make 2 objects draggable. When they enter a container and collide with an object inside, I want the object inside that container to follow the dragged item. When the dragged object exits the container, the object following it should release it's connection to the dragged object. Haven never worked with these libraries prior to this, I'd love some guidance.
-
I'm having fun getting Draggable and TweenMax working with RequireJS (as part of a Durandal project). I think there might be a bug in Draggable, it looks to me like it is missing a dependency definition for CSSPlugin. The define for it looks like this: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite"], function(EventDispatcher, TweenLite) { On line 1757 CSSPlugin gets referenced as a global object: setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.setTransformRatio || CSSPlugin._internals.set3DTransformRatio) This line fails with an exception when I am loading Draggable via RequireJS. I have fixed it by changing the define call to: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite", "plugins.CSSPlugin"], function(EventDispatcher, TweenLite, CSSPlugin) { Does this look like a valid fix or am I missing some other reason why this call to CSSPlugin as a global object should be like it is ?
-
On Safari and Chrome the zIndexBoost functionality doesn't work if the element you are dragging isn't absolutely positioned. If you drag one of the boxes to the right, you'll find it is underneath the boxes it is being dragged over. I can see that larger z-index values are getting applied, but they don't take effect for some reason that I don't understand. It all works fine in Firefox, but not in Chrome/Safari on OSX and on mobile Safari I've created a CodePen to demonstrate the issue: http://codepen.io/andynormancx/pen/vEPvxb -
I create a map with a zoom buttons in Edge Animate. And try to use draggable plugin for move the map. Draggable.create(sym.$("map"), { type:"x,y", cursor:"pointer", bounds: "#Stage", edgeResistance:0.65 }); But when i start drag it my zoom button is hiding under the draging map. How i can make my zoom buttons always on top when i drag the map? Here is my example https://cloud.mail.ru/public/229d51df0867/drag.rar I can't make the circle at the top
-
Hi! I've just discovered GreenSock yesterday and the whole suite of products and it's kinda awesome. Learning the basics is very simple and even more advanced stuff is pretty accessible. But sadly I'm facing an issue with Draggable. I've noticed that it it's not possible to drag an element out of a scrollable div. The element just keeps scrolling in it's own div, but he can't escape it's own div. To clearify the situation: I'm buidling a scrollable bar at the top of the page (which kan be hidden/shown). That bar contains draggable elements that will be dragged onto an element that is somewhere at the bottom of the page. Is it possble to disable some kind of CSS in the onDragStart to allow exiting the scrollable div or something else? This codepen showcases the issue: http://codepen.io/Mattttt/pen/pvYgER Thanks!
-
Hi, I'd like to replicate a popular scrolling effect in mobile apps these day. When scrolling a list with a header image, overscrolling would cause the header image to grow in relation to your overscroll amount. I listened to the 'onDrag' event, and then query the 'y' property of the Draggable instance. It seems that the reported value does not take overscroll into account. I patched the Draggable source to enable this (detail below), but I am wondering, is there's a proper/native way of doing this? This is my patch to Draggable.js: //pass instance to scroll proxy object so we can dispatch event and append overscroll information 677-ish: ScrollProxy = function(instance, element, vars) { //now when instantiating scrollProxy, pass reference to self 1824-ish: scrollProxy = this.scrollProxy = new ScrollProxy(self, target, ... //line 752-ish right after if (offsetLeft || oldOffset) { .. }, append offset info and dispatch a new overscroll event instance.offsetLeft = offsetLeft; _dispatchEvent(instance,"overscroll","onOverscroll"); //line 785-ish right after if (offsetTop || oldOffset) { ... }, append offset info and dispatch a new overscroll event instance.offsetTop = offsetTop; _dispatchEvent(instance,"overscroll","onOverscroll"); So now in my onOverscroll handler I do something like: var offset = myDraggableInstance[0].offsetTop; var headerScale = 1 + ((offset / 120) * .5); //scale the header up to 1.5x when overscroll is between 0-120px Thanks!
-
Hello, I am trying to build a UI where two arrows – up and down – control the scroll position. The scroll element is a Draggable. var scroller = $('.scroller.draggable'); Draggable.create(scroller, { type:"scrollTop", edgeResistance:0.75, throwProps:true, onDragStart: function() { Draggable.get(menu).disable(); }, onDragEnd: function() { Draggable.get(menu).enable(); } }); $('.icon-arrow-down').on('click', function(event){ TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeOut, onComplete:updateYScroll}); function updateYScroll() { console.log(this.scrollY); //$scope.yStart = scroller.scrollY + $scope.yIncrement; } }); But when calling scrollY I always get undefined... Greetings, luneyard
-
I am using Draggable and ThrowPropsPlugin. I want to have divs (eventually with images) be both draggable and resizable. I have this working, BUT the user can resize the box horizontally and vertically which will stretch or squish the image. How can I set it up so the box (image) gets resized proportionally, keeping the images aspect ratio? I've attached my html file. Thanks, Caroline gsap_draggable_test1.html
-
I was super excited when I saw the demo, but now I'm trying to combine rotate and drag (kinda like playing cards, or a table of photos maybe) and am starting to run into problems. I know this is probably not what it was originally designed for, and maybe there's a better way or a better plugin for this, but I thought I'd pop this up anyway as a kind of curveball request. Has anyone done this before? Is there a better way? Thanks!
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
