whiteBox = new Layer
width: 30
height: 30
x: 519
y: 360
opacity: 0
backgroundColor: “rgba(255,255,255,1)”

layerA = new Layer
height: 4
width: 100
x: 100
backgroundColor: “rgba(255,255,255,1)”

layerA.draggable.enabled = true
layerA.draggable.vertical = true
layerA.draggable.horizontal = false

layerB = new Layer
x: 429
y: 377
width: 72
height: 4
backgroundColor: “rgba(255,255,255,1)”

layerB.draggable.enabled = true
layerB.draggable.horizontal = false
layerB.draggable.vertical = true

redLine = new Layer
parent: layerA
x: 105
y: 0
height: 4
width: 200
backgroundColor: “rgba(255,39,0,1)”
opacity: 0

layerA.onDragMove (event, layer) ->
redLine.opacity = 1
if layerA.y >= layerB.y – 5 && layerA.y <= layerB.y + 5
redLine.width = 220
ease: ‘ease-in’
whiteBox.opacity = 1
else
redLine.width = 200
whiteBox.opacity = 0

layerA.onDragEnd (event, layer) ->
redLine.opacity = 0

Final outcome