Draggable

Layers can be made horizontally and/or vertically draggable. They can be tossed around with momentum. To control where they end up, you can define a specific area that a layer can be dragged within. They can optionally be dragged beyond this area, but they will then bounce back by default.

layer.draggable.enabled `<boolean>`

Enable dragging for the layer.
레이어에 드래그를 사용할 수 있도록 함.

layerA = new Layer
layerA.draggable.enabled = true

layer.draggable.horizontal `<boolean>`

Enable or disable horizontal movement.
가로방향으로 입력되는 드래그를 활성화하거나 비활성화 한다.

layerA = new Layer
layerA.draggable.enabled = true

# Disable horizontal dragging
# 가로방향의 드래그 입력을 비활성화   
layerA.draggable.horizontal = false

layer.draggable.vertical `<boolean>`

Enable or disable vertical movement.
세로방향으로 입력되는 드래그를 활성화하거나 비활성화 한다.

layerA = new Layer
layerA.draggable.enabled = true

# Disable vertical dragging  
# 세로방향의 드래 입력을 비활성화  
layerA.draggable.vertical = false

layer.draggable.speedX `<number>`

Modify the horizontal dragging speed. The value is in pixels per mouse moved pixels. The default value is 1. When set lower then 1 dragging will be slower than mouse movement and vice versa. You can set the value to 0 to disable horizontal dragging.
가로방향 드래깅 속도를 조정한다. 속도 값은 픽셀 당 마우스가 움직이는 픽셀이다. 기본값은 1이며, 1보다 작은 값으로 설정하면 마우스가 움직이는 속도도 작아진다. 0으로 설정한다면 가로 방향의 드래깅을 비활성화한다.

layerA = new Layer
layerA.draggable.enabled = true

# Make horizontal dragging slow  
# 가로방향 드래깅 속도를 느리게하기  
layerA.draggable.speedX = 0.1

# Make horizontal dragging fast  
# 가로방향 드래깅 속도를 빠르게하기  
layerA.draggable.speedX = 10

layer.draggable.speedY `<number>`

Modify the vertical dragging speed. The value is in pixels per mouse moved pixels. The default value is 1. When set lower then 1 dragging will be slower than mouse movement and vice versa. You can set the value to 0 to disable vertical dragging.
세로방향 드래깅 속도를 조정한다. 속도 값은 픽셀 당 마우스가 움직이는 픽셀이다. 기본값은 1이며, 1보다 작은 값으로 설정하면 마우스가 움직이는 속도도 작아진다. 0으로 설정한다면 세로 방향의 드래깅을 비활성화한다.

layerA = new Layer
layerA.draggable.enabled = true

# Make vertical dragging slow
# 세로방향 드래깅 속도를 느리게하기  
layerA.draggable.speedY = 0.1

# Make vertical dragging fast
# 세로방향 드래깅 속도를 빠르게하기
layerA.draggable.speedY = 10

layer.draggable.constraints `<object>`

Constraints for the area this layer can be dragged within. If you also set the x and y properties as constraints, the layer will snap to that position on DragStart. The layer will animate to the new point on click.
해당 레이어의 특정 영역에 드래깅에 대한 제약을 줄 수 있다. 만약 제약사항으로 x, y의 속성을 설정한다면, 해당 레이어는 드래깅 시작점으로 튈 것이다. 해당 레이어는 새로운 클릭 지점으로 움직인다.

layerA = new Layer
layerA.draggable.enabled = true

# Set dragging constraints  
# 드래깅 제약사항 설정  
layerA.draggable.constraints =
    x: 0
    y: 0
    width: 200
    height: 200

layer.draggable.constraintsOffset `<object>`

Get the offset position of a layer, compared to its dragging contraints. If you set the dragging constraints to { x: 100, y: 100 }, the layer will still be initially positioned at x: 0, y: 0. After dragging, the layer will be bound to its dragging contraints. This offset can be measured with constraintsOffset
레이어 위치의 오프셋을 가져와서 드래깅 제약사항과 비교한다. 만약 여러분이 드래깅 제약사항을 { x: 100, y: 100 }로 설정했다면, 레이어는 초기에 위치한 x: 0, y: 0에 여전히 있을 것이다. 하지만 드래깅한 후에는 레이어가 드래깅 제약사항의 위치로 바운드 한다. 이 오프셋은 constraintsOffset에 의해 측정될 수 있다.

layerA = new Layer
layerA.draggable.enabled = true

# Set dragging constraints
layerA.draggable.constraints =
    x: 100
    y: 100
    width: 200
    height: 200

# Get the constraintsOffset  
# constraintsOffset 가져오기  
print layerA.draggable.constraintsOffset

# Returns { x:-100, y:-100 }

layer.draggable.isBeyondConstraints `<boolean>`

See if the draggable layer is currently beyond its dragging constraints.
This property is read-only.
드래그 레이어가 현재 드래깅 제약사항이 있는지 확인한다.
이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Set dragging constraints  
# 드래깅 제약사항 설정  
layerA.draggable.constraints =
    x: 100
    y: 100
    width: 400
    height: 400

# On move, see if the layer is beyond constraints or not
layerA.on Events.Move, ->
    print layerA.draggable.isBeyondConstraints

layer.draggable.overdrag `<boolean>`

Enable or disable dragging beyond the set constraints.
제약사항이 설정된 드래깅을 활성화하거나 비활성화 한다.

layerA = new Layer
layerA.draggable.enabled = true

layerA.draggable.constraints =
    x: 0
    y: 0
    width: 200
    height: 200

# Disable dragging beyond constraints  
# 제약사항이 있는 드래깅 비활성화   
layerA.draggable.overdrag = false

layer.draggable.overdragScale `<number>`

Set the dragging resistance when dragging beyond constraints. The scale is defined with a number between 0 and 1. The default value is 0.5.
드래깅에 제약사항이 있을 때 드래깅 resistance를 설정한다. 값의 범위는 0과 1 사이의 숫자로 정의하며, 기본값은 0.5이다.

layerA = new Layer
layerA.draggable.enabled = true

layerA.draggable.constraints =
    x: 0
    y: 0
    width: 200
    height: 200

# Increase resistance when dragging beyond constraints  
# 드래깅에 제약사항이 있을 때 resistance 증가  
layerA.draggable.overdragScale = 0.25

layer.draggable.momentum `<boolean>`

Enable or disable momentum/inertia simulation on DragEnd. Enabled by default
DragEnd의 momentum/inertia simulation을 활성화하거나 비활성화 한다. 기본값은 Enabled이다.

layerA = new Layer
layerA.draggable.enabled = true

# Disable momentum  
# momentum 비활성화  
layerA.draggable.momentum = false

layer.draggable.momentumOptions `<object>`

Options for momentum simulation on DragEnd.
DragEnd의 momentum simulation의 옵션.

layerA = new Layer
layerA.draggable.enabled = true

# Define friction and tolerance of momentum  
# momentum의 friction과 tolerance 정의   
layerA.draggable.momentumOptions =
    friction: 2.1
    tolerance: 0.1

layer.draggable.bounce `<boolean>`

Spring animation when momentum runs beyond constraints.
momentum 실행에 제약사항이 있을 때 Spring 애니메이션.

layerA = new Layer
layerA.draggable.enabled = true

layerA.draggable.constraints =
    x: 0
    y: 0
    width: 200
    height: 200

# Snap back after dragging beyond constraints
# 제약사항에 의해 드래깅한 후 돌아오도록 하기  
layerA.draggable.bounce = false

layer.draggable.bounceOptions `<object>`

Options for the spring animations when momentum runs beyond constraints.
momentum 실행에 제약사항이 있을 때, spring 애니메이션의 옵션.

layerA = new Layer
layerA.draggable.enabled = true

layerA.draggable.constraints =
    x: 0
    y: 0
    width: 200
    height: 200

# Define friction, tension and tolerance of bounce  
# bounce의 friction, tension, tolerance를 정의함  
layerA.draggable.bounceOptions =
    friction: 40,
    tension: 200,
    tolerance: 0.0001

layer.draggable.velocity `<object>`

Current velocity for the draggable layer. The velocity is read-only.
드래그 레이어의 현재 velocity. velocity는 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# On DragMove, print the x and y velocity
layerA.draggable.on Events.DragMove, ->
    print layerA.draggable.velocity

layer.draggable.direction `<string>`

Current dragging direction. Returns "up", "down", "left" or "right".
This property is read-only.
현재의 드래깅 방향. 리턴값은 "up", "down", "left" or "right"이다.
이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Print the current direction  
# 현재의 방향 출력하기  
layerA.on Events.DragMove, ->
    print layerA.draggable.direction

layer.draggable.angle `<number>`

Current angle (in degrees) for the draggable layer. This property is read-only.
드래그 레이어의 현재 각도. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Print the current angle  
# 현재 각도 출력하기  
layerA.on Events.DragMove, ->
    print layerA.draggable.angle

layer.draggable.updatePosition(x `<number>`, y `<number>`)

Returns: Object
Function to override the final value before setting it. Allows you to add your own behaviour to a draggable. This allows you to create draggable layers that snap between certain distances.
값을 설정하기 전에 최종 값을 override하기 위한 기능이다. 여러분은 드래그에 나만의 동작을 추가 할 수 있다. 이것은 당신이 특정 거리를 사이의 스냅에 드래그 레이어를 만들 수 있습니다.

layerA = new Layer
layerA.draggable.enabled = true

# Round numbers to a set amount  
# 어림수로 양을 설정  
round = (number, nearest) ->
     Math.round(number / nearest) * nearest

# Drag in increments of 20px
layerA.draggable.updatePosition = (point) ->
    point.x = round(point.x, 20)
    point.y = round(point.y, 20)
    return point

layer.draggable.directionLock `<boolean>`

Snap to horizontal/vertical direction after a certain threshold.
정해진 threshold 이후엔 가로/세로 방향으로 튄다.

layerA = new Layer
layerA.draggable.enabled = true

# Allow dragging only in one direction at a time  
# 한 번에 한 방향으로만 드래깅하게 하기
layerA.draggable.directionLock = true

layer.draggable.directionLockThreshold `<object>`

The thresholds for lock directions. The x and y values represent the distance you can drag in a certain direction before it starts locking.
lock 방향의 thresholds. x, y 값은 거리를 나타내며, 여러분은 lock이 걸리기 시작한 지점의 직전까지 거리만큼 드래그할 수 있다.

layerA = new Layer
layerA.draggable.enabled = true

# Snap horizontally after dragging 50px  
# Snap vertically instantly  
# 50px 드래깅한 뒤 가로 방향으로 튀기  
# 즉시 세로 방향으로 튀기   
layerA.draggable.directionLock = true

layerA.draggable.directionLockThreshold =
    x: 50
    y: 0

layer.draggable.pixelAlign `<boolean>`

Snap to pixels while dragging to avoid subpixel-antialiasing.

layerA = new Layer
layerA.draggable.enabled = true

# Snap to pixel while dragging
layerA.draggable.pixelAlign = true

layer.draggable.isDragging `<boolean>`

Whether the layer is currently being dragged (returns false when animating).
This property is read-only.
레이어가 현재 드래그 되고 있는지 아닌지 확인한다. (애니메이션이면 리턴값은 false)
이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Check if the layer is being dragged  
# 레이어가 드래그되고 있는지 체크  
layerA.on Events.DragMove, ->
    print layerA.draggable.isDragging

layer.draggable.isAnimating `<boolean>`

Whether the layer is currently being animated by a momentum or bounce animation. This property is read-only.
레이어가 현재 momentum이나 bounce animation에 의해 움직이고 있는 것인지 확인한다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Check if the layer is animating  
# 레이어가 애니메이션에 의해 움직이고 있는지 체크  
layerA.on Events.DragMove, ->
    print layerA.draggable.isAnimating

layer.draggable.isMoving `<boolean>`

Whether the layer is currently moving, either by dragging or by a momentum/bounce animation. This property is read-only.
레이어가 현재 dragging이나 momentum/bounce animation에 의해 움직이는 것인지 확인한다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Check if the layer is moving  
# 레이어가 움직이는지 체크  
layerA.on Events.DragMove, ->
    print layerA.draggable.isMoving

layer.draggable.offset

Returns: Object
Get the x and y position of the draggable layer, relative to the Screen.
This property is read-only.
스크린 상에서 드래그 레이어의 x, y 상대 좌표를 가져온다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Get the x and y position of the layer  
# 레이어의 x와 y 좌표를 가져온다. 
layerA.on Events.DragMove, ->
    print layerA.draggable.offset

layer.draggable.layerStartPoint

Returns: Object
Get the x and y position of a draggable layer. This property is read-only.
드래그 레이어의 x, y 좌표를 가져온다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# On DragStart, get the current x and y position  
# DragStart에서, 현재의 x와 y 좌표를 가져온다.  
layerA.on Events.DragStart, ->
    print layerA.draggable.layerStartPoint

layer.draggable.cursorStartPoint

Returns: Object
Get the x and y position of the cursor, relative to the Canvas. This property is read-only.
캔버스 상에서 커서의 x, y 상대 좌표를 가져온다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# On DragStart, get x and y position of the cursor
layerA.on Events.DragStart, ->
    print layerA.draggable.cursorStartPoint

layer.draggable.layerCursorOffset

Returns: Object
Get the x and y position of the cursor, relative to the draggable layer. If you click in the top left-corner, it returns { x: 0, y: 0 }. This property is read-only.
드래그 레이어 상에서 커서의 x, y의 상대좌표를 가져온다. 만약 여러분이 상단의 왼쪽 코너를 클릭한다면, { x: 0, y: 0 }을 리턴할 것이다. 이 속성은 읽기 전용이다.

layerA = new Layer
layerA.draggable.enabled = true

# Get the cursor position within the layer  
# 레이어 안에서 커서의 좌표를 가져온다.  
layerA.on Events.DragStart, ->
    print layerA.draggable.layerCursorOffset

layer.draggable.propagateEvents `<boolean>`

Set the propagateEvents property of a draggable layer. Set to true by default. This is useful when working with draggable layers within ScrollComponents or PageComponents, or nested Components. 드래그 레이어의 propagateEvents 속성을 설정한다. 기본값은 true로 설정된다. 이 기능은 ScrollComponents나 PageComponents, nested Components 내에서 드래그 레이어로 동작할 때 가장 효과적이다.

Let's say you'd like to have a draggable layer within the scroll.content layer. By default, moving the layer will also move the scroll.content. This is because both layers will listen to the dragging events. 여러분이 scroll.content layer 내에서 드래그 레이어를 만들길 원한다고 가정해보자. 기본적으로, 레이어를 움직이려면 scroll.content도 움직여야 한다. 따라서 두 레이어가 드래깅 이벤트를 감지해야 한다.

To prevent any draggable subLayer from passing events to its superLayer, set propagateEvents to false. This applies to all nested draggable layers.
이벤트를 통과한 어떤 드래그 서브레이어가 수퍼레이어가 되는 것을 방지하기 위해 propagateEvents를 false로 설정한다. 이것은 모든 중첩 드래그 레이어에 적용된다.

scroll = new ScrollComponent
    width: Screen.width,
    height: Screen.height

scroll.content.backgroundColor = "#28affa"

layerA = new Layer
    superLayer: scroll.content,
    backgroundColor: "#fff"

layerA.draggable.enabled = true

# Setting propagateEvents to false allows you to drag layerA  
# layerA의 드래깅하기 위한 propagateEvents를 false로 설정 
# without also scrolling within the ScrollComponent  
# ScrollComponent의 스크롤 옵션도 제거  
layerA.draggable.propagateEvents = false

Draggable

layer.draggable.enabled <boolean>

layer.draggable.horizontal <boolean>

layer.draggable.vertical <boolean>

layer.draggable.speedX <number>

layer.draggable.speedY <number>

layer.draggable.constraints <object>

layer.draggable.constraintsOffset <object>

layer.draggable.isBeyondConstraints <boolean>

layer.draggable.overdrag <boolean>

layer.draggable.overdragScale <number>

layer.draggable.momentum <boolean>

layer.draggable.momentumOptions <object>

layer.draggable.bounce <boolean>

layer.draggable.bounceOptions <object>

layer.draggable.velocity <object>

layer.draggable.direction <string>

layer.draggable.angle <number>

layer.draggable.updatePosition(x <number>, y <number>)

layer.draggable.directionLock <boolean>

layer.draggable.directionLockThreshold <object>

layer.draggable.pixelAlign <boolean>

layer.draggable.isDragging <boolean>

layer.draggable.isAnimating <boolean>

layer.draggable.isMoving <boolean>