Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rhaffaele

Draggable

Recommended Posts

Hi, what are we supposed be looking at? Nothing is moving in the sample you provide and nothing can be dragged as well.

 

Please create a reduced sample that points out just the issue you're having in codepen so we can take a better look:

 

Happy Tweening!!!

 

  • Like 2

Share this post


Link to post
Share on other sites

I don't understand why it doesn't work for you.  It works for me. Can you see the image of the woman? I tried to upload it to codepen but I can't insert images, I should do it again with the box instead of images.

Share this post


Link to post
Share on other sites

From the link you provided I'm seeing this:
p8GE6Qk.jpg

 

In the index page appears a picture of a woman but there is nothing draggable there neither.

 

Regardless of the content the codepen sample allow us to take a look at your code, play with it and try to figure and solve any possible issues.

Share this post


Link to post
Share on other sites

I replaced the dragable images now it should work.
I did this code pen, if you drag the first image to target two go back with an animation, if you do it the second time the animation is different, but it should be the same.

See the Pen oNNJjQy by rha-elettronica (@rha-elettronica) on CodePen

Share this post


Link to post
Share on other sites

Just remove the position parameter in the drag end callback:

onDragEnd: function(e) {
  $("#drag1").removeClass("invisible");
  if (this.hitTest("#target2", "30%")) {
    tl
      .to(box, 0.1, { rotation: 15 })
      // in this instance no position or repeat delay
      .to(box, 0.1, { rotation: -15, repeat: 2, yoyo: true })
      .to(box, 0.1, { rotation: 0 }, "+=0.1");
    TweenLite.to(e.target, 0.2, { x: 0, y: 0, top: 0, left: 0 }).delay(0.5);
  }
  if (this.hitTest("#target1", "30%")) {
    TweenLite.to(this.target, 0.6, { opacity: 0, scale: 0 });

    TweenLite.to("#drag1", 0.6, { opacity: 1 });
  } else {
    TweenLite.to(e.target, 0.1, { x: 0, y: 0, top: 0, left: 0 });
  }
}

It seems that the position parameter is messing things up after the first run, also I don't see the need to state a repeat delay of  0 seconds, that is basically the default.

 

Finally you're using the same method on all the drag end callbacks, you can easily create one method and pass it directly to the callback. Take a look at this:

 

https://www.drycode.io/

 

Happy Tweening!!!

  • Like 3

Share this post


Link to post
Share on other sites

Thanks so much now it works.
you are right, better to group and keep the programming dry. But it's not easy and I'm a beginner. During the week I will try to fix it

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×