Search the Community
Showing results for tags 'draggable'.
-
if (Draggable.hitTest('#test')) { console.log('hit'); } Results in: Uncaught TypeError: Cannot read property 'pageX' of undefined. Object, selector - same result.
-
This came up in my thread from earlier today and ties into another recent thread about events in TweenMax. I'd like to make a feature request for Draggable to emit events (onPress, onDrag, onThrow, etc.). This feature will allow the decoupling of our code from the create function and encourage good coding practice and organisation. Unlike TweenMax, Draggable is heavily tied to the DOM and so I think this is a reasonable request. At the moment I'm doing this using pub/sub to emit the events from within the Draggable init code. It works but it is an extra step. Here is a good example - the PageModule and the HeaderModule are logically separate pieces of code. The PageModule doesn't know about the HeaderModule, it just emits events. Jack, Carl, what do you think?
-
I've got a gallery of items. When dragged, the box's z-index appears to be higher than elements created before, but lower than ones created after. I want the z-index (for the dragged item) to be higher than all other items, not just the ones created before in the DOM. ie box 1 should move on top of boxes 2 - 5, not under them. I've tried ZIndexBoost. Edit: I've also tried applying style.zIndex="" on click, but it's not working.
-
Is it possible to set snapping onDragEnd? I've tried... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = function(){ return 0; } } } and... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = [0]; } } but neither seems to work. I'm guessing this is because the snapping tween is created before this point, any ideas? Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.
-
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.
-
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 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)
-
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
-
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.
-
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
-
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! -
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'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!
-
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!
-
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
