Draggable Parent/Child question from a newbie

[edpilot]

I'm an admitted newbie Greensock user/member. I use Edge Animate and have incorporated Draggable into a very simple interactive component. I typically learn with simply trying different things and looking at what others have done. It's steep learning curve thing to do, but I just keep plugging away at it.

 

I'm trying to solve a parent/child issue. I have a larger circle that has a smaller "wedge" layered on top. I can rotate both symbols independently but ultimately I want the lower layer (the larger circle) to rotate the child wedge. The wedge should be able to be moved independently of the larger circle.

 

I'm looking at all kinds of ways to solve this, but thought I'd try asking for help too. The very simple js code is pasted below...it works just fine rotating my "dial" (the large circle) with my "index" (the wedge).

 

Any suggestions would be appreciated as I tinker with the code. I'll upload something to Codepen as soon as I get that figured out too!

 

Thank you for any help or suggestions!

 

Ed

/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      
      

      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
         Draggable.create("#Stage_dial",{type: "rotation"});
         Draggable.create("#Stage_index",{type: "rotation"});

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

   //=========================================================
   
   //Edge symbol: 'dial'
   (function(symbolName) {   
   
   })("dial");
   //Edge symbol end:'dial'

   //=========================================================
   
   //Edge symbol: 'index'
   (function(symbolName) {   
   
   })("index");
   //Edge symbol end:'index'

})(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-3280152");

[edpilot]

I'll add that I have played around with a Codepen post "Nested Draggable" and was able to get the effect I am looking for, but it does not translate well (yet) with my Edge Animate environment.

[Carl]

HI and welcome to the GreenSock forums.

 

I don't know enough about Edge to be able to troubleshoot this from just the code you provided.

I think a simple CodePen (without any Edge code) would be the best bet.