Search the Community
Showing results for tags 'draggable'.
-
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.")
-
Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});
-
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....
-
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
-
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!
-
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 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; } });
-
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! 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
-
Hi! Im building a thing where I drag a element and check with hitTest for another element. I need to change the DOM structure so the dragger element gets inside ".drop-here" element as soon the hitTest is true. It works fine but the draggable elements gets jumpy when dragging to the ".drop-here" area. I need to reset/update the coordinates I guess but dont now how. I tried using draggable.update() with no success. Any suggestion to solve this problem? Many thanks! -
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
-
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?
-
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(); }); }
-
Hello, I am developing a cordova/phonegap application for iOS and Android, and I am trying to use Draggable for scrolling to overcome some problems with iOS native scrolling in cordova. I am not seeing any movement when pressing and dragging the screen even though the onPress and onDrag are firing. I have noticed in the documentation that height must be set somewhere, but please be specific about where and with what javascript (not jquery) functions. I can verify that offsetHeight has already been set on the div you added and the value looks correct. Is there something else to set? If that is not the problem, other things that might be a cause are that I am doing an infinite scroll of text, and since the user can jump around, the Draggable is created when there is no content, because the parts being presented in the scrolling viewport are frequently deleted and other pages added. Plus as the user scrolls forward or back new pages are added to the beginning or end. To date I am seeing Draggable work with my application running under Node/Webkit, but when I move the same code to a cordova (phonegap) application nothing moves. If Draggable scrolling is known to work with Cordova, please let me know and I will try to put together a test that could be presented in codepen. Gary
-
Here's a sample in Codepen. I'd like to drag the rows around after the user selects Move. I am finding the correct position and re-arranging the DOM correctly, but I can't figure out how to "reset" Draggable. I've tried update. I've also tried killing it and resetting it, which oddly remembers its old settings and recovers. Any suggestions on how to make this work? (Also while I'm here, why do I have to remove the "style" in moveRowsCompleted? I shouldn't have to clean up after GSAP.) I'd really like to get the rows to move out of the way as I drag around and saw this but that's a bit too complicated for my skill level, although it is beautiful to watch. If there is a simpler example I'd appreciate it: http://codepen.io/anon/pen/qdKqWE?editors=101 (I've suggested this before and I haven't seen anything but it would be really nice to have a series of simple functions to do some of these things like jQuery UI. I really want to use GSAP -- it is so much smoother than jQuery and works on mobile browsers -- but stuff like sortable is extremely difficult to achieve, or at least appears to be.) One last comment: I need to use animations a lot on a temporary basis like this. I want to make the animation go then, when it is done, be done with it and the code. GSAP seems to leave a lot of style tags around. Is that correct or am I mis-interpretting its primary usage model? Thanks for any help in advance.
