Draggable Bounds - Absolute values

[admin web]

i have a jacket like this http://prntscr.com/k206iv. And on back side of jacket  a specific area where be drag svg file like  letter "A" with in area on back jacket.

See the Pen PaLBRx by kdpan (@kdpan) on CodePen

[GreenSock]

I didn't quite understand your question. I also didn't notice you using any "bounds". I'd like to help, but can you clarify what you're asking? 

[Yaniv Nagar]

31 minutes ago, GreenSock said:

I didn't quite understand your question. I also didn't notice you using any "bounds". I'd like to help, but can you clarify what you're asking? 

 

From looking at the demo, I can only assume he would like to limit the dragging of the letter to the area of the back area...

[admin web]

okay let me explain.  i have a jacket like this http://prntscr.com/k206iv. And on back side of jacket  a specific area where be drag svg file like  letter "A" with in area on back jacket.

[Carl]

 

your demo had a lot of code I didn't understand especially relating to the 2 different Draggables that were being enabled and disabled.

 

The biggest problem seemed to be in the selector you were using for Draggable too

 

var drag = $('body .jacket-image .active svg');

 

Not sure why the selector needs to be that complicated but it appears its trying to select the entire svg. Since the SVG includes the patch and the jacket image I think its better just to select the patch so I gave the patch a clear id of "patch".

 

I got rid of all the code that was not related to keeping the patch draggable within the bounds of the back of the jacket and this seems to work.

 

var R = Draggable.create( "#patch", { type: "x,y", bounds:{minX:-100, maxX:80, minY:-50, maxY:200}});

 

See the Pen jKRNyZ?editors=0011 by GreenSock (@GreenSock) on CodePen