How do I turn off dragging on sublayers while dragging parent?

Question

I have a large parent layer with several children rows in side. I want to prevent the rows from being dragged horizontally while the parent is being dragged vertically. My guess was to make draggable = false on TouchStart, but no luck.

cellHeight = 170
cellWidth = 640
rows = 3

container = new Layer
container.draggable = true
container.draggable.speedX = 0
container.width = cellWidth
container.height = cellHeight * rows
container.on Events.TouchMove, ->
    myLayer.draggable = false

container.on Events.TouchEnd, ->
    container.animate
        properties:
            y: 0
        curve: "spring(500, 40, 20)"


for row in [0..rows-1]
    myLayer = new Layer
        x: 0
        y: cellHeight*row
        width: cellWidth
        height: cellHeight
        backgroundColor: "#FFF"
    myLayer.superLayer = container
    myLayer.style =
        borderBottom: "1px solid black"
    myLayer.draggable = true
    myLayer.draggable.speedY = 0
    myLayer.on Events.TouchStart, ->
        container.draggable = false

    myLayer.on Events.TouchEnd, (event, touchedLayer) ->
        container.draggable = true
        touchedLayer.animate
            properties:
                x: 0
            curve: "spring(700, 40, 20)"

score 0 · Answer 1 · answered Feb 03 '15 at 03:16

I have tested your script. Are you trying to prevent moving the parent while dragging the children? You could try this in your for loop:

myLayer.on Events.DragMove, ->
    container.draggable.enabled = false
myLayer.on Events.DragEnd, ->
    container.draggable.enabled = true

How do I turn off dragging on sublayers while dragging parent?

1 Answers1