ThrowPropsPlugin: for two location to drop, one is initial point and another one is target drop zone.

[minhein]

Hi 

 

I am having issue with drop. 

 

Boxes sit on the centre axis and there are left and right drop zones of that centre axis. 

 

If user want to drop a box to left drop zones, can drag and drop it there. There is lockaxis option (x), can drag it straight to the target drop zone. Also can drag it back to the original centre point. 

 

left zone ---- centre point ---- right zone

 

I am using ThrowPropsPlugin licence version. But I couldn't figure it out. If there is any scenario, it would be great. Enlighten me if there is a way.

 

Thanks.

 

 

 

 

 

 

 

Edited April 1, 2019 by minhein
Want to add the three columns in explanation.

[PointC]

I'm not understanding the question. Do you think you could make a demo for us?

Thanks.

[minhein]

Hi Craig

 

Thanks, please see this one, 

See the Pen OGPgao by minhein (@minhein) on CodePen

 

[PointC]

Okay, thanks for the demo. The demo has a couple problems. jQuery isn't loaded so it won't run and dropArea is undefined.

 

What exactly is the desired result here? You want the blue box to drag left and right, I get that part. But is it then supposed to snap to the center of the left or right column? Is that right? Should the user be able to drag outside the red boundary? 

 

A little more info would be helpful. Thanks.

[minhein]

I want to drag the blue box from the origin point to the point which is in the left column. Also, it should be able to drag and drop it back to the original centre point.

 

When a user drags the blue box, the user should be able to drag it within three columns. But when the user releases the mouse or touch screen, should go to the nearest point, either the original point or drop zone point which is in the left column.

 

Thanks, Craig.

 

See the Pen OGPgao by minhein (@minhein) on CodePen

 

 

[PointC]

I'm still not sure if the user should be able to drag outside the red lines? I'm also not sure if this is all a fixed size or it will be dynamic? Here's a fork of your pen with a snap array and a loop to make each box draggable. 

 

See the Pen NmPwWY by PointC (@PointC) on CodePen

I'm using hard coded numbers for the snap array, but you can measure the columns and draggables to create that array. Without more desired behavioral info, I'm just guessing here.

 

Hopefully that helps. Happy tweening.

[minhein]

Nice one. Thanks.

 

But I actually want to drop the box 1 in the left column, not in the right column. How do I restrict that? 

 

 

 

 

 

[PointC]

You mean box1 can only be in the left column or the center origin?

 

What about the other boxes? Do they have restrictions too?

[minhein]

yes, it is correct. Box1 can only be in the left column or the centre origin. 

 

But for other Boxes, they can be in the right column or the centre origin too. So, each box can be dropped to either in the left or right column and the centre point. 

Edited April 1, 2019 by minhein

[PointC]

How do you determine which boxes can be in which columns? Is this an alternating pattern --> Box1 Left/Center --> Box2 Right/Center, etc. 

 

I don't quite understand what you're trying to do here.

 

[minhein]

yes, it is fixed value either left or right and the centre. First box 1 always goes to either in the left or the original centre point. For box 2 always goes to either in the right or the original centre point.  But box 3 still goes into the right or the original centre.  box 4 goes to the left or the original centre. It is not an alternative pattern. 

 

 

 

 

Edited April 1, 2019 by minhein

[PointC]

Well, I guess if there is no pattern to it, you'll have to do a bit of this manually. I've just set up an array for the box snaps and gave each one a value of either 0 or 1. During the creation loop, if that value is 0, the snap array is [-62, 0] which will restrict the box to center or left. But if the value is 1, it gets a snap array of [0, 62] which restricts it to origin or right.

 

See the Pen BEyOjb by PointC (@PointC) on CodePen

 

I'm still not clear where this is going so I'm not sure if this is even the best approach, but it will work.

[minhein]

It is exactly what I would like to build. It works well.

This one is useful stuff, var snaps = [0, 1, 1, 0]; newSnap = snaps === 0 ? [-62, 0] : [0, 62]; 

Thank you so much for this one. I will use more features from Greensock stuff in my upcoming projects.

[PointC]

Glad to hear that works for your needs.

 

That's just one quick way to make it work. Another option would be to use a data attribute on the draggable items and check that as you loop through and create the draggable elements. As with all things JavaScript and GSAP, there are many possibilities and paths that lead to a working solution.

 

Happy tweening.