5 Replies Latest reply on Jun 12, 2013 7:04 AM by resdesign

# Wondering about the difference between element and symbol drag with draggable

I am trying to understand the difference between a symbol and an element with draggable.

Her is the sample I made: https://www.box.com/s/v2s8ueeqof9litu4zvwm

• for the element Rectangle, drag works fine. The element drags from where it is.
• for the box symbol which is originally at left 0 and top 0, no problem
• for the boxCopy symbol which is placed at left 100 and top 100, on drag, it jumps of that amount.

I suppose drag gets the original position of the symbol box on the stage and add these numbers to the stage position. I drug the symbol arround and it seems that the stage is translated left and top of the amount of the left and top of the symbol.

This does not happen with the element Rectangle.

Obviously there is something I do not understand.

• ###### 1. Re: Wondering about the difference between element and symbol drag with draggable

Dear redesign

that thing is that you made a copy of that box Symbol !, different between box and boxcopy is that you create the box symbol, but you did copy boxcopy from box, so that makes boxcopy to shift itself with the left and right you added to the stage, if you added 100px then it will get 100px as a 0px because it is the copy one of the original one, the original one have 0 and 0 px left and top so it will get the first position you mad for it ( 100px top 100px left ) as 0 , 0 position then will add that 100 pix to that, for example if you place your object boxcopy in 200px left and 200px right after you click it will shift to 400px left and 400px right because it will get 200px left and top a base position 0 , 0 and add 200px to that

solution : you have 2 choices

First : create your second symbol as new ( dont copy paste )

Second : put all of your symbol in the 0 , 0 and css them

in your example the css would be :

sym.\$("boxCopy").css({"left":"100px", "top":"100px"})

sym.\$("box").css({"left":"0px", "top":"0px"})

and all of your symbols (box and boxcopy) should place at 0 left and 0 top

Zaxist

• ###### 2. Re: Wondering about the difference between element and symbol drag with draggable

I am not sure it is the problem because if I have only box at say 100,100 then it will jump too. The only way to have a symbol not jump is to have it initially at 0,0

• ###### 3. Re: Wondering about the difference between element and symbol drag with draggable

yes, you are right, i was wrong about the copy part...

it will get the first position you mad for it ( 100px top 100px left ) as 0 , 0 position then will add that 100 pix to that

but i dont know why symbol have this shift !!

Zaxist

• ###### 4. Re: Wondering about the difference between element and symbol drag with draggable

Could Anyone fom Adobe tell us what I am doing wrong?

• ###### 5. Re: Wondering about the difference between element and symbol drag with draggable

OK. Joel gave me the solution.

After placing your symbols on the stage, delete the left and top lines in the symbol. This will reset to (0.0).

Here is the corrected file. You will see in the left panel that there is no left and top except for one to show the difference.

https://www.box.com/s/v2s8ueeqof9litu4zvwm