FramerJS: Reordering an array

Question

I'm not native speaker in English, sorry for my pool word.

I made array like this..

# 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] 
 item[i].draggable.enabled = true
 item[i].draggable.speedY = 0
 item[i].borderRadius = 100
 item[i].opacity = 0.5
 item[i].centerY() 

# 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

but it doesn't work. when drag layer a, other layers doesn't move. how can I fix it??

Answer 1

Layers are accessed via i, but i is always 6 on event because i is referred to same thing(on memory). You can "capture" layers on each loop like this.

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

but a problem will be remained yet. First ordering will work well. but second one will not work as what you want. Properties in animation should be recalculated after ordering. That sounds crazy? Well. The way that accessed by position is better than by index of array. like this, you know.