[Draggable - pevent start dragg by custom elements.]

Hi,

 

I've two problems

 

1. Why my input checkbox doesn't wroking with custom css styling?

 

2. Is there a way for adding  object(s) for disable dragging ? Maybe usefull will be some propperty Draggable like

exclude:["#someel1","#someel2"]

 

Thanks

 

 

See the Pen mEJEjW by amonk (@amonk) on CodePen

[strange behaviour TweenMax with transform svg]

Good to know that these lines are not equivalent

TweenMax.set($("#t2"), { attr:{ x:x , y:y } , rotation:rot , svgOrigin:x+' '+y });

and

TweenMax.set($("#t2"), { x:x , y:y , rotation:rot , svgOrigin:x+' '+y });

Thanks Diaco

[strange behaviour TweenMax with transform svg]

I want to apply the transformations (with rotation) of text and when he tries to do it single-function TweenMax, looks bad.

 

Only after prior transformation giving the rotation 0 and then the correct angle, everything looks all right

 

Can you explain to me if I do something wrong?

See the Pen BKmepj by amonk (@amonk) on CodePen

[is it BUG? with SVG and Draggable]

Thank you for the detailed explanation,

 

You are Great team.

[is it BUG? with SVG and Draggable]

In Inkscape I produce very complex svg's. Of course I could  correct the code after creation, it is not a problem.

I thought that the simpler way is to handle the side plugin.

Thank You

[is it BUG? with SVG and Draggable]

Below this situation (right green rect is ok)

 

See the Pen EKvyeX by amonk (@amonk) on CodePen

[is it BUG? with SVG and Draggable]

I've the <image element inner group id="A" . This group is inner another group id="B"

the group "A" has attribute transform .

 

 transform="matrix(.997 .0745 -.0745 .997 97 -406)" Draggable FAIL  - this code was produced by Inkscape with optimization save option.

 

Now when I want apply draggable to Image element, The group "B" is going far far away tranform matrix x and y about 16300px.

 

When I changed to transform matrix group "A" like showed below ALL is working OK

 

 

transform="matrix(0.997, 0.0745, -0.0745, 0.997, 97, -406)" Draggable OK 

 

Maybe worth to detecting kind matrix deklaration.

 

 

 
 

[SVG apply transform attribute with Draggable]

Yes, text rotated, BUT the positions x,y are wrong. I tried add 

transformOrigin:"50% 50%" , looks better but not the same

[SVG apply transform attribute with Draggable]

Hi,
 
I've svg text element with attribute.
 
<text .......  x="200" y="100" transform="rotate(30 200 100)" ......

 

Everything looks ok until create Draggable.

Draggable ignore rotation.

 

Maybe is there simply way to conver to matrix property?

 

Example shows two identical elements. One is Draggable.

 

See the Pen eZWmJj by amonk (@amonk) on CodePen

[Vote on new feature for staggered animations]

progression ?

[Drop draggables on SVG Clipped elements]

More complicated like paths. I'm using it in photoclip

[Drop draggables on SVG Clipped elements]

So, I invented some solution, maybe not elegant, but this is enough for me.

 

See the Pen XbNojw?editors=101 by amonk (@amonk) on CodePen

[Drop draggables on SVG Clipped elements]

Hello,

 

I'm trying to solve the problem.

 

In this example , when I drag red box on to circle , the image is change in both element (rectangle and circle with photo).

Second situation, problem, drag red box on circle , but little bit outer (in bounds circle). The image is change in the circle it should not do this.

I know that hitTest gets a bounds of object.

 

Maybe do you have some idea?

See the Pen NqbBvd?editors=101 by amonk (@amonk) on CodePen

[Double Draggable And Click Item]

Wow, fantastic trick Thank You

[Double Draggable And Click Item]

Hello,

 

Can you help me resolve problem.

 

The Color has change on each time when I "mousedown" on item. I tried "click" but doesn't dispatch event

 

I wouldl like change color only when "click"

See the Pen GJpQxm?editors=101 by amonk (@amonk) on CodePen

[SVG Draggable bounds. Scale and Rotate]

Hi,

 

I try to solve problem with setting up bounds params in Draggable. (SVG element)

 

 

This should work like this. This example has only Scaling

See the Pen DFEkx by amonk (@amonk) on CodePen

 

 

I tried to manually compute bounds to {minX,maxX,minY,maxY} using _gsTransform and scale, but when i rotate the object something bad work. 

 

 

See the Pen yydpYd?editors=101 by amonk (@amonk) on CodePen

[Draggable rotation SVG around center point.]

Thx

 

Not even thought about that earlier use the "set"   - with Draggable

 

Thanks again

[Draggable rotation SVG around center point.]

Hi,

 

Can you help me solve the problem.

See the Pen JoqVzp by amonk (@amonk) on CodePen

[Draggable, double usage in one container. - SVG]

I published a little update

Looks.. that is working Ty Diaco

[Draggable, double usage in one container. - SVG]

Hello,

 

I'm trying to resolve this problem.

 

I've one "main" draggable element which includes 3 elements.

One with litter "M" - using for moving main element, and second with 'gradient' (is draggable too) to change "crop".

Last element greenbox is now not usable.

I want drag main element only when I use yellow box with "M"

But  when I drag 'green' element I don't need drag only this element without change position of all object.

See the Pen dPaxXw by amonk (@amonk) on CodePen

[Draggable update bounds attribute]

Hello,

 

How can I update bounds attribute, without creating new instance?

 

 

 Draggable.create("#elmnt", {

        edgeResistance:1,

        force3d:false,

        bounds:{minX:-200, maxX:0, minY:-200, maxY:0},

        throwProps:true,

        type:"x,y"});

 

 

It it would look like this

 

Draggable.update("#elmnt",{ bounds:{minX:-100, maxX:0, minY:-150, maxY:0}});

 

 

 

[TweenMax & Draggable - how update (correct) after scale]

Rodrigo,  Thanks!!!

You save my live. 

onUpdate:function()
      {
        Draggable.get("#box2").applyBounds();
      }

[TweenMax & Draggable - how update (correct) after scale]

Hello,

 

I've some little problem.

I wrote the code

 

See the Pen DFEkx by amonk (@amonk) on CodePen

 

How can I update  draggable box position after scale?. Maybe it is possible to update when render?

 

Try this steps:

 

1. press button (+) about 5 times;

2.drag square at (0,0) position;

3 press button (-)

 

I don't want white space,