Search the Community

Hi Seeing as this is my first post ever I hope it will be satisfactory as far as forum rules go. I used gsap a long time ago when it was just launched in javascript format and loved it instantly. Unfortunately now a lot has changed in my absence, and I am struggling. I will try to explain my problem since I cannot make a codepen project at this point. Luckily there is another post with many codepens on that explains what I need. It can be found here: OSUblake did an amazing job helping MattE to solve his problem. I however am trying to take that to the next level, but draggable has got me all confused. This after I finally convinced my client that $150 is not that much annually for what he will gain, and now I cannot even make the example they asked me for. hahahahahaha. Further information just in case it is needed: I have successfully implemented draggable on the svg element that will receive the dragged items, since that svg along with its paths can be dragged anywhere on the screen. It has svg rectangles on it that will act as drop zones for what is being dragged to it. The container being dragged from will be a stationary svg element at the edge of the screen like a strip or toolbar, overlapping the receiver svg. Now, in the above post OSUblake made a scrollable div from which you can drag and drop other divs (It looks fantastic). I am however trying to add the following features: No JQuery if at all possible. (Makes you a translator first and scripter second.) The drag item container must not have a scrollbar. (As explained above it is actually an svg element with paths that can be dragged to another svg element's paths but that is besides the point right now. I would like to mention that I am animating custom left/top properties on the paths currently and updating the d attribute during animation from callBacks which may not work with draggable) When you start dragging but stay in the container going only in the direction the container scrolls, it must not drag but instead grab all items and scroll them revealing the hidden ones like is common on phones/tablets. (For me the items immediately start dragging (copy of themselves) and then I am stuck. I found some stuff in the docs that can lock direction after you scroll for a bit, but it is not viable for what I need. It must basically want to scroll the container first and drag if you leave the container) The items in the container element must not be removed during the drag or after the drop. (I will figure out what was dropped from one of the callBacks and draw the correct item on the receiver.) Any advice will be much appreciated. Kind Regards Jayson EDIT: I have now made a codepen with as much of the code in it as I can remember: Let me know if it is helpful or what I need to add to explain it better. https://codepen.io/jayson-hans-bourne/pen/qBbxzLw