FramerJS : 배열 재정렬

Question

영어 원어민이 아니므로, 제 풀 단어를 아쉽게 생각합니다.

나는 그것이 작동하지 않는

# item layers 
 
a = new Layer({x:20, width:80, height:80, image:"images/a.png"}) 
 
b = new Layer({x:120, width:80, height:80, image:"images/b.png"}) 
 
c = new Layer({x:220, width:80, height:80, image:"images/c.png"}) 
 
d = new Layer({x:320, width:80, height:80, image:"images/d.png"}) 
 
e = new Layer({x:420, width:80, height:80, image:"images/e.png"}) 
 
f = new Layer({x:520, width:80, height:80, image:"images/f.png"}) 
 

 
# item layers array - draggable 
 
item = [a, b, c, d, e, f] 
 
for i in [0..5] 
 
\t item[i].draggable.enabled = true 
 
\t item[i].draggable.speedY = 0 
 
\t item[i].borderRadius = 100 
 
\t item[i].opacity = 0.5 
 
\t item[i].centerY() \t 
 

 
# item reorder 
 
item[i].on Events.DragMove, -> 
 
    if item[i].midX > item[i+1].midX 
 
     item[i+1].animate 
 
      properties: 
 
      x:item[i+1].x - 100 
 

 
    else if item[i].midX < item[i-1].midX 
 
     item[i-1].animate 
 
      properties: 
 
      x:item[i-1].x + 100

하지만 .. 이런 식으로 배열했다. 레이어를 드래그하면 다른 레이어가 이동하지 않습니다. 어떻게 해결할 수 있습니까 ??

Answer 1

레이어는 i을 통해 액세스되지만, i은 동일한 내용 (메모리)을 참조하기 때문에 이벤트시에는 i은 항상 6입니다. 이와 같이 각 루프에서 레이어를 "캡처"할 수 있습니다.

prev = item[i-1] if i > 0 
curr = item[i] 
next = item[i+1] if i<item.length-1 

그러나 아직 문제가 남아 있습니다. 우선 주문이 잘 작동합니다. 그러나 두 번째 것은 당신이 원하는대로 작동하지 않습니다. 애니메이션의 속성은 주문 후 다시 계산해야합니다. 그게 미친 소리 야? 잘. 위치를 기준으로 액세스하는 방법이 배열 인덱스보다 낫습니다. like this, 알 잖아.