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] 
	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

​

但它不起作用。拖动层a时，其他层不会移动。我怎么才能修复它？

Answer 1

层是通过i访问的，但i在事件时总是6，因为i引用的是相同的东西(在内存上)。你可以像这样“捕获”每个循环中的层。

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

但仍将存在一个问题。第一次订购会很好用。但是第二个不会像你想要的那样工作。动画中的属性应该在排序后重新计算。这听起来很疯狂吗？井。按位置访问的方式比按数组的索引访问要好。like this你知道的