Search the Community
Showing results for tags 'draggable'.
-
I'm interested in creating a draggable div that can be translated or rotated depending on some criteria, for example: rotate if CTRL is pressed, translate otherwise...or, translate if the mouse is clicked near the center of the object, rotate if the mouse is clicked near the edge of the object. The method I've tested involves detecting the CTRL key up/down events and killing the existing translate/rotation draggable and creating the other one. This works except that after an object that has been rotated, then translating it causes additional rotation. Any suggestions?
-
Hi there, I'm developing an application that requires nested draggable objects (draggables within draggables), however I'm running into issues. As far as I can understand from the docs, the linked codepen should work, allowing the child draggable to be dragged independently of the parent. This appears not to work as a result of the draggable events (mousemove etc) being attached to the document rather than the actual draggable element, so stopPropagation has no effect. If I understand correctly though stopImmediatePropagation should still work though based on the event attachment order. I understand one solution would be to enable/disable the parent draggable based on child dragStart/dragEnd, however this doesn't work for me as I need to have a vertical-only draggable grandchild within a vertical-only draggable child within a horizontal-only draggable parent (complicated I know!), and dragging the grandchild horizontally should still trigger the parent draggable, but dragging it vertically should NOT trigger the child draggable. My current solution involves enabling/disabling the parent draggable based on scroll direction, however this results in a small amount of movement in the parent direction before it can be disabled. The reason I'm asking is that this is a responsive app, and mobile is currently working fine as the Draggable code attaches touch events directly to the element, rather than the document, and works perfectly (with no movement of the parent element whatsoever). Is there a way to replicate this on desktop without breaking everything, potentially using stopImmediatePropagation? (I note in the code you've put "//attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work.")
-
I've got an object that I've made draggable using GSAP Draggable. What I'm wanting to do is basically reset the position after the object is dragged (i.e., as soon as you let go of the object, it jumps back to where it was before the drag started). It looks like Draggable is moving the object using transform: translate3d(x, y, z). So, I've tried to reset those values using jQuery by doing the following: var drag = Draggable.create($dragger, { type: "x,y", onDragEnd: function(e) { $dragger.css({ transform: "translate3d(0px, 0px, 0px)" }) }, }); It works, up until I try dragging the object again. Seems like Draggable remembers where it was last dragged/dropped, ignores the translate3d position I manually set, and starts the drag where it left off last time. Is there a better way to do this? Perhaps a way to simply set the position of an object using GSAP code? Or a way to get Draggable to forget the position it was in on the last drag and reset? I thought about using TweenLite/TweenMax to set the position w/ 0 duration, but that seems like an ugly solution. Any ideas?
-
Hey Guys, i was playing around with the awesome Draggable Library and i wondered how i go about saving(DB) the postion of the currecnt object and load it again later? https://greensock.com/draggable i tried the following, but not sure if it's correct approach( since the values return includes translate3d): onDragEnd: function() { var obj = $(this._eventTarget); // option one var pos = item.position();; var posx = pos.left; var posy = pos.bottom; console.log(parseInt (posx ) ); console.log( parseInt (posy )); // option two console.log(parseInt (this.y) ); console.log( parseInt (this.x)); }
-
Hi, new to this framework but it seems really really neat, makes me excited to get in to web animation. Great work Greensock team! I have a question that I suspect is fairly simple, I would like to trigger different tweenlite animations using a draggable button, so that depending on where the draggable object stops, or snaps, it will trigger a new tweenlite object. Hopefully someone can understand my question I will put it into a codepen but this is my js atm. Draggable.create("#button", { type:"x", bounds: document.getElementById("line"), throwProps: true, liveSnap: true, snap:[5, 75, 150, 225, 285], trigger: document.getElementById("button"), onDrag: function() { console.log(this.x) }, onDragEnd:function() { TweenLite.to(sideElement1, 2, {sideElement1, width:"200px", height:"150px"}); } }); any help would be greatly appreciated. would love to be able to contribute to this forum, since this seems to be part of my new work description....
-
Hi guys, just been testing cross-browser compatibility of Draggable via its demo page (http://greensock.com/draggable) and found out that it does not run on MSIE8 under WIndows 7 (in a Virtual Machine downloaded from https://www.modern.ie/en-us/virtualization-tools). It gives out the classic "Object does not support this property or method" and Codepen obviously won't work in MSIE8 at all, so I can't test it there. I know that this whole thing should be compatible with MSIE7+ from what I read, so I'm a bit confused now. Any advice please? Thanks, Martin
-
Draggable.hitTest() trhows and error when it can't find the element: Cannot read property 'getBoundingClientRect' of null I found the line with _unwrapElement(e).getBoundingClientRect() in Draggable.js and fix it like that: _unwrapElement(e) ? _unwrapElement(e).getBoundingClientRect() : false It just returns false when there is no element or it's hidden. Everything is working now but on my side. I'm not sure that this is the right fix. I will try to reproduce the problem on codepen when I have more time if you are not aware of this behavior.
-
On a page there is a svg element and a switch. The svg element is made draggable with the draggable plugin. Once for moving (draggable A set to type 'x,y'), other times, after setting the switch for rotating (draggable B set to type 'rotation'). Both draggable objects (both A for translation and B for rotation) are set to the same svg element, but if one draggable object is enabled the other is disabled first. The draggables are both set to throwprops to respect the same bounds. Both draggable objects use a <div> for these bounds (both pointing to the same <div>). Both draggables are working, but there is one thing that is breaking the layout: when the svg element is thrown 'out of the stage', and pushed back because of throwprops and the bounds, after using the rotation-draggable to spin the svg element around, when the user switches back to the translation-draggable object (after disabling the rotation draggable first), the svg element jumps (changes position). I found out that the rotation-draggable changed the bounds of the translation-draggable (changing the values for minX, minY, maxX, maxY). It's like the rotation-draggable is not respecting it's bounds at all and is could go over the bounds while spinning around. Am I missing something here? So my question really is: is it possible to set bounds the same way on rotation-draggables as translating-draggables? I hope my explanation is a little understandable. If needed, I create a codepen later
-
Here is a solution to dragging and reordering divs, vertically. I was wondering if someone could check my code and see if there is anything I can optimize? ( Original idea was from Blake http://codepen.io/osublake/pen/zxZQXX )
-
Hello, The code : http://codepen.io/hemels/pen/WQGqLB I'm working on project with draggable and works perfect, BUT i cant get one thing working. After you drag a div over a grid of divs the draggable div is append to the cell from the grid. This works fine. But when you drag the div for the second time, the div has to be 'de'-preppend (works) only its on the wrong position. I guess its the transform that needs to be reset. But what ever i try i cant get the result i want. There must be a simple sollution somehow, but after 2 hours of try and error i ask... Thanks for the great software and the support ! gr Mels
-
Hi Guys, I'm trying to make a little hockey game using the draggable/throwprops plugins. I get that you can do hit detection while a draggable element(puck) is being dragged. But I need to do a hit detection on an object that is thrown (check to see if the puck has hit the posts, or is in the net etc). Any advice on where to start?
-
Hi Everyone, I think i found a bug in the latest version of draggable. When i went to test my latest project in ie8 the hit test did nothing in that browser. Worked fine in all others. I am using the newest version you can download. No errors where thrown up or anything like that. I could still drag everything but once i drag the div over the hit location nothing happened. When i switch to an older version of draggable it worked just fine. I know the release notes on 1.18 says it was fixed but it didn't work for me. I created a codepen: http://codepen.io/anon/pen/epdBgP but it seems code pen doesn't work in IE8. So i attached the export zip of this. What should happen when you move the red div to the white one an alert should pop up, but it does not in ie8. If i'm coding something wrong let me know! Thanks, Brad
-
Hi! I have a canvas with a number of draggable objects. The codepen represents just two. In the draggable callback, I send off the target eg red box, to a function which instantiates jQuery knob. The knob does its job and adjusts the size. When I click on another object, say the blue box, I expect draggable to associate knob with now the blue box as target. Alas, it does not. Can somebody tell me how to do this? I also need to get the natural height of images in the draggabe callback so that I can calculate an x:y ration for proportional resizing....? I think I have seen someone instantiate a new image object from the src attr, and then get widht and height...? Thanks -
I've read through the docs but couldn't find anything relating to this in there. Is it possible for us to trigger functions or other tweens whilst dragging in draggable? For example if you started dragging, the container would tween to an opacity change or the cursor would change whilst you were dragging then change back when you let go. I've attached a pen I have that uses draggable if it's any help to work with. Thanks!
-
Hello, I have a draggable object (Note_G2) that I created. I'm using Adobe Edge and want to know if there is a way to change the object's opacity when it is dragged to a particular position. I don't want the opacity to change while dragging, only once the object has reached a certain position ( i.e.: once it reached its bounds) in which I'd like its opacity to be about 25%. Here is my current draggable which works great. Is there a simple variable to include that will help me achieve this? Draggable.create(sym.$('Note_G2'), { bounds: sym.$("Rectangle"), type: "x", cursor: "ew-resize", edgeResistance: 1, zIndexBoost: true } ); Thanks! SteveZ
-
My draggable items are always being "layered" in the order which they are created in the DOM. This make sense. However, I cant seem to be able control the layering by setting the z-index or setting the zIndexBoost property to true. The codepen demonstrates my problem. I appreciate any help. -Thanks!
-
Hello, I'm trying to align the center of a draggable element to the cursor position at start of dragging. var element = document.getElementById('block'); var draggable = new Draggable(element, { onDragStart: function centerAlignElementToCursor(e) { var rect = element.getBoundingClientRect(); var centerX = (rect.left + rect.right) / 2; var centerY = (rect.top + rect.bottom) / 2; var deltaX = e.clientX - centerX; var deltaY = e.clientY - centerY; TweenLite.set(element, { x: '+=' + deltaX, y: '+=' + deltaY }); draggable.update(); } }); See full code in the referenced Codepen. It works as expected in 1.15.1, but doesn't work since 1.16.0. It looks like the call to draggable.update() is ignored inside the onDragStart callback. How it can be fixed? -
Hi all. Im having difficulty with rotation plugin. Unlike in the demo, the rotation I get it not synced up with mouse movement (or touch and drag) in my app. Instead it looks like its easing to the needed rotation. What am I missing here? var rotationSnap = 90; Draggable.create("#wheelHolder", { type:"rotation", throwProps:true, snap:function(endValue) { return 360 / notes1Arr.length; } });
-
Hi all, I'm setting up a video gallery for a new project and am harnessing the power of the magnificent draggable plugin. The problem i'm currently facing is how to adapt the layout for various screen sizes. Currently the draggable functions are fired on screen sizes over 700 pixels (all messily contained within an if statement) and the layout is changed via css to adapt when below that pixel size. What i'd love to do is change the draggable functions and dependencies on sizes below 700 px to function vertically instead of the current horizontal layout. The if statement / CSS media query option seems so ugly at the moment. Also - I didn't want to include the throwprops plugin as it's members only - do we have a common source for this to be used on codepen? Cheers!
-
Hi! What I would like to do, is to be able to click on any one of a number of elements and then move it around with keystrokes. Somehow the jquery-ui draggable() has this functionality. You click on any element which has been assigned draggable and off you go: $('#myElement').draggable(); The problem I have at the moment is that once I have assigned an element to listen to an event handler, when I click on it - it never forgets it. So when I now click on another element to assign it instead to listen to keycode events, it moves but along with the first element, which has not dropped the baton! I am thinking this must be common and necessary functionality in the world of animation which is why I have posted here and hope it~s not too off topic, and that there must be some code that does it, perhaps using jquery off() or deleting some object property...? Tried to do codepen but could not get keycode events to work. The HTML window was simply appended with the number 6! If it helps, from a design perspective, my intention is for the user to click to save the positions and sizes of all elements that they have moved around, and then save them locally or on server. Its goinf to be a kind of 'arrange your own furniture' canvas. So, grateful for any pointers. Thanks
-
While doing hit test while the window is scrolled, I don't seem to get the correct results. This occurs if I am trying to compare the pointer event of the mouse. The code pen example demonstrates it: the top 2 boxes will work correctly, but if you scroll the demo window down and try with the bottom 2 boxes the hittest will still return false. My initial thought is that this has something to do with some confusion or misuse somewhere between clientx/pagex, but I'm just beginning to investigate. Any ideas or pointers?
-
Sometimes when I drag the draggable item really fast across the screen. The position of the element becomes misaligned and is no longer aligned with the position of the pointer where my finger is. I'm not sure where to begin. I'm hoping someone has come across this issue at some point? I was not able to find anything in the forum. I'm trying to use it in an Angular directive within an ionic framework\Cordova app I'm not doing anything fancy— I'm doing the following: on drag: Checking for hit test to determine where I'm hovering on drop: I'm Setting the bounds to elements the user can drop on If user tries to drop on on-droppable elements, tween back to the original position Everything works perfectly except for the occasional spurt where the element position does not line-up with the pointer\finger\user's drag position. Any help is appreciated. thanks! -
On Chrome, when a touchevent occurs, the pageX/Y values are set to 0. This means that hitTest won't work when passing in the touch events... I'm not sure if this is something easy to handle inside Draggable, but I thought I would post it to see if anyone has any thoughts, and if not at least let others know and show my workaround. For now I am doing a workaround to make my own point to pass in to Draggable.hitTest(), like so: // e is my event var point = e; if(e.pageX === 0 && e.pageY === 0 && e.changedTouches) { x = e.changedTouches[0].pageX; y = e.changedTouches[0].pageY; point = { left: x, right: x+1, top: y, top: y+1 }; } var hit = Draggable.hitTest(element, point); This is a related investigation to a thread I started at http://greensock.com/forums/topic/12189-draggablehittest-in-a-scrolled-window/, but seemed like a separate topic, so I started a new thread.
-
Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
-
I started playing with edge animate last week and was using jquery-ui for my drag and drop. I then learned that there was a known bug that made it act like crap in responsive layouts. A coworker to me about greensock so I tried it out and it works good. The only issue I have run into is it seems to effect it's z-index. I have the create statement on creation complete w/ it set to disable. I also have 2 buttons that when pressed enable/disable the draggable. The dragged object becomes the top div and can cover the buttons used to toggle it. Looking online I found people trying to force it to the top but no one trying to make it stay put. is this a known issue? Sorry if this is a dumb question, I am teaching myself 2 new softwares. this is how I am calling it: function init(){ var Protractor = Draggable.create(document.getElementById("Stage_MilProtractor")); Protractor[0].disable(); sym.$("move").click(function(){ Protractor[0].enable(); }); sym.$("write").click(function(){ Protractor[0].disable(); }); }
