Jump to content
GreenSock

eguneys

How to cancel drag and return to the last position, if out of drop target

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a table where I can drag stones all over the place. I also have a special place (stoneplace) where the stones can stay. Stones can not stay anywhere else. I need to be able to drag stones anywhere on the table but if I drop them out of stoneplace they have to revert back to their last position. How can I have this effect?

Link to comment
Share on other sites

To get the best help you should provide a CodePen demo so that we can see the exact code and elements you are using as there is quite a bit of work involved in trying to build something like you are describing. 

 

In the meantime, you can study this pen by OSUBlake:  http://codepen.io/osublake/pen/XJQKVX

It has some advanced drag-and-drop logic built in.

 

Details on how this was built can be found here: http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div/?hl=xjqkvx#entry47018

 

The level of assistance he provided in that thread is way beyond what we typically do. We are all very fortunate that he is so helpful and generous.

 

To get started with the basics of hitTest please see: http://codepen.io/GreenSock/pen/GFBvn

 

 

also Rodrigo built a neat demo showing how to clone elements and revert them back to normal position if you don't drop them in the right place:  http://codepen.io/rhernando/pen/LEyLxp?editors=001

 

It sounds like you don't need the cloning, so what you are trying to do should be quite a bit simpler.

  • Like 2
Link to comment
Share on other sites

  • Solution

On the other hand, what you are trying to do should be pretty easy and I think this will be helpful for many.

 

Take a look here: http://codepen.io/GreenSock/pen/Pqwxvw

 

I initially assumed you were asking for something more complex. Sorry about that.

  • Like 1
Link to comment
Share on other sites

There is a bug when used with `throwProps: true`. Because if thrown it can get outside the bounds and stay there. How can I fix that? I want to disable throw props but then I can't use snap feature. How can I use snap while throwProps is false?

Link to comment
Share on other sites

Hi eguneys  :)

 

if i understood correctly what's your problem , pls try this : 

 

var droppables = $(".box");
var dropArea = $("#dropArea");

Draggable.create(droppables, {
  throwProps:true,
  bounds: window,
  onPress: function() { this.startX = this.x; this.startY = this.y; },
  onDrag:Check ,
  onThrowUpdate:Check ,
  onDragEnd:Back ,
  onThrowComplete:Back
});

function Check(){
if (this.hitTest(dropArea, "99%")) {
      $(this.target).addClass("highlight");
    } else {
      $(this.target).removeClass("highlight");
    }
};

function Back(){
    if (!$(this.target).hasClass("highlight")) {
    TweenLite.to(this.target, 0.2, {x: this.startX,y:this.startY})
  }
};
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.
×