Multiple draggable items disable 1, all are disabled

[Oscar Rottink]

I think I'm doing something very wrong. Got a large container which is draggable and one inside that container which is draggable. If I drag the small one the other one shouldn't be dragged anymore. 

 

If I try to disable the outer one (probably wrong) all drag is disabled (well almost).

 

Created a little codepen here which displays the problem: 

 

Edit: I think I got it while playing around. Would be nice if someone told me this is the way to do this

See the Pen Lrqvk by OzBoz (@OzBoz) on CodePen

[Carl]

Hi,

 

Thanks a lot for creating the test case for us.

 

I just looked at your pen. Not sure if it is in the fixed state or not.

Is it now behaving the way you want? From my first look at your code it seems to be doing what you are telling it to do.

 

If this is working for you, I really don't see anything wrong with what you are doing (again, not exactly sure what you want).

 

If you need more help, please provide detailed steps explaining what I can do to see the unwanted behavior.

 

Thanks.

[Diaco]

Hi guys

 

this's shortest solution : 

See the Pen yfalK by MAW (@MAW) on CodePen

.

var outerDrag = Draggable.create("#container",{
type:"x,y",
throwProps:true
});

var innerDrag = Draggable.create("#dragInside", {
  onPress: function(e) { e.stopPropagation() },
  type:"x,y",
  throwProps:true
});

[Oscar Rottink]

Hi!

 

Yeah Carl that was the behaviour I wanted. But I see has an even shorter version. Not sure if you believe me Diaco but I actually did played with the stopPropagation() thing before I posted. I really need to get some more basic knowledge of javascript so it's less try and error but more logical