MattE

Allright, I'll take a look. I will try to bother you as less as possible so you can focus on your own work

#6 actually uses the same code as at the start (to drag stuff from the topbar to the soupZone and back) letter.draggable = new Draggable(clone, { onPress : setActive, onDrag : collapseSpace, onRelease : dropTile }); This defines the method that are called when a dragevent happens. Those methods aren't yet "able" to drop something on top of the [.] because I had the issue that they didn't even drag

Well, I was trying to refer to you so I could trigger some kind of notification, but that didn't seem to work. But you've still magically appeared here, so it kind of worked!

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!

Your code keeps changing drastically every time I'm nearly finished with implementing the whole GSAP stuff, but 1 thing still doesn't work. Currently I'm iterating over the draggable elements so I can execute the "animate" method onto them. Good part: jQuery finds the elements Bad part: I can't find the values linked to them. var lettersToAnimateInSoup = $(".tile"); lettersToAnimateInSoup.each(function(index, value) { console.log("this: " + this); console.log("1: " + this.inSoep); console.log("1.5: " + value.inSoep); if (this.inSoep) { if (this.animateTween) { this.animateTween.kill(); this.animateTween = null; TweenLite.to(this.element, 0.5, {x:0, y:0}); } else console.log("3"); { animateLetter(this); } } }) I can't find any of the objects linked to the the tile. Both "value" and 'this' are div's, but they return "undefined" when asking for the "inSoep" value, which is a boolean. I know this doesn't work because the values aren't linked to the HTML DOM, but how can I find the linked elements? In case this should be important: tiles = $(".tile"); tiles.each(function (index) { amountOfTiles += 1; var element = $(this); var wrapper = element.parent(); var offset = element.position(); var scope = { clone: element.clone().addClass("clone").prependTo(container), element: element, wrapper: wrapper, width: wrapper.outerWidth(), dropped: false, moved: false, inSoep: false, startIndex: index, animateTween: null, get x() { return getPosition(wrapper, offset).x; }, get y() { return getPosition(wrapper, offset).y; } }; scope.draggable = createDraggable(scope); element.bind("mousedown touchstart", scope, startDraggable); });

Hah, don't mind my writing! It was just to pen down the logic of your code, so once I understoond it, my notes were kind of useless. I must say your explanation of your code is kind of awesome. Even the refactored version is an huge improvement. I've extended your code to make the elements draggable from the top to the bottom and back without any issues. I'm fairly confident that I used an acceptable solution --> http://codepen.io/Mattttt/pen/ogOmMN

Well, I'm guessing my notes to understand the code are sort of useless right now I've created this CodePen to show my current progress : http://codepen.io/Mattttt/pen/KwYZOm. You can ignore the endzone for a moment, I don't need it in my project. Things that work: - Images can be dragged from the startZone on top of the image - Everything animates like it should (it starts from the correct start to the correct destination) Things to do: - Make elements from the image droppable again in the startZone (preferably on the same position it originated from). - Make the elements on the image move randomly (but still in the bounds of the image). To get the feel that they are "floating" on top of the image. Don't mind the tomato, it was the first image I could find If you have some remarks on my code (most likely), don't hold back! I'm still learning and I've come a long way (in my opinion) but I'm still trying to learn (from kinda the best!) EDIT: Don't mind the debugging information or weird choice of colors. It help me keep track of some elements when coding EDIT 2: I've also noticed that the dragging semi-works on mobile devices. The dragging gets initiated, but gets stuck and just stops. I'm not quite sure yet what's causing the error, but I'm going to try to find out (maybe the onmousedown has something to do with it)

Woah! It took me a lot of time to finally figure out exactly how everything works. I must salute you sir, thinking of this solution for the issue is just incredible. Tomorrow I'm going to implement this into my already existing code or maybe continue working on your (gonna think on that) to get to the result I want. Jihaa!

Thanks for the quick reply (and sorry for my delayed reply) I've used your provided code and it solves a lot of issues (but it creates some more, yay web development!) Here is a new CodePen I've created: http://codepen.io/Mattttt/pen/KwEBdE Let me list the positive things - Items can now be dragged out of the scrollable div - Items are added to the endzone - Items are removed from the startzone after being dragged into the endzone The more negative things (issues) - When picking a letter that is not visible at the start (example: Y), the letter isn't shown when dragging because the scrollbar disappears - When dragging a letter, all the letters are shown above the buttons. This isn't a major issue, but it's noticeable. - When releasing something in the endzone, the animation starts from a weird position. It would be logical that it start from the position where the mouse has released the element. My guess is that this has to do with the parameters in the TweenLite.to method, but I'm not really familiar with that yet (but I'm working on it). - The option will exist to drag elements from the endzone back to the startzone. It is best to work with an if/else or just create a new collection of draggables when they've been dropped in the endzone? I'm aware that this is a huge list, but it would be awesome if the basic functionality works!

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!