Draggable, double usage in one container. - SVG

[chriswyl]

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

[Diaco]

Hi chriswyl 

 

pls add this to your second draggable creation Vars  :

onPress: function(e) { e.stopPropagation() }

like this :

Draggable.create("#outer", { type:"x,y" , throwProps:true });

Draggable.create("#inner", { 
  type: "x,y",
  throwProps:true,
  bounds:{minX:-100, maxX:0, minY:-150, maxY:0},
  onPress: function(e) { e.stopPropagation() }
  });

[chriswyl]

I published a little update

Looks.. that is working Ty Diaco