Jump to content


Drag divs leaves gaps, odd positioning

Recommended Posts

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:

See the Pen qdKqWE?editors=101 by anon (@anon) on CodePen


(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.

See the Pen eNKBOx?editors=101 by eliajf (@eliajf) on CodePen

Link to comment
Share on other sites

That's much cleaner. Thank you. Did you just write that? Holy cow if so. I wish I was that versed in GSAP. Let me play with that a little.


In the meantime, I don't understand why .kill doesn't, you know, kill it. I added four lines -- one commented out which I didn't include here -- at the bottom of onRelease, but this doesn't actually reset the Draggable for that row:

var draggable = Draggable.get($dragRow);

Shouldn't that kill the draggable object for that row and create a new one when I call moveRowsDraggable again? Instead, it retains the "style" contents for the row. I also tried explicitly removing the style, which is the commented out line. That didn't work either.

Link to comment
Share on other sites

This was the missing call. I found it in another forum post:

TweenMax.set($row, {clearProps:"x,y"});

I kill the Draggable process then call .set() with this clearProps, which cleans the old code up. Just happy I got it working! Too much to learn about GSAP, to be honest.

  • Like 1
Link to comment
Share on other sites

Hi eliajf,


The problem with what you are doing has nothing to do with GSAP. You are changing the HTML structure on elements that are positioned relative. It doesn't matter if you used another library, the same thing would happen, so you're really not cleaning up after GSAP. And having GSAP remove the style when you kill doesn't make much sense since it would revert it back to its default state. So my demo that you linked to would completely fall apart. All the tiles would move to the top-left corner and their size would be reduced to 0.


To help you out, I simplified my demo to the bare bones. It should be much easier to understand, but it's not going to do anything fancy like pushing the tiles out of the way while you're dragging.


See the Pen pJKRWy by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks, @OSUBlake. I understand exactly what you are saying and probably phrased it incorrectly. I was trying to figure out how to reset the inline style CSS. I thought killing the Draggable object and then assigning a new one would do that, but apparently not.


I got a basic drag working between your code and @Diaco. I would like to refine and improve so will refer back to your codepens later. Thanks again to both of you for the help.

  • Like 1
Link to comment
Share on other sites

Glad you got it working! 


Sorting is a pretty complicated thing to do, and these demos show that you can do it in less than 50 lines of code. Although not a fair comparison, the draggable in jQueryUI is about 1000 lines of code.


And about GSAP leaving style tags around. This is how you usually change the style with JavaScript, so it's not unique to GSAP. You may not have noticed this, but when you change a CSS style with jQuery it does the same thing.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.