Hi,
I’m trying to create some kind of list re-arragement / ordering with swipe gesture, so far it’s working as workaround without native drag n drop list order/sort. But in this solution, what is lack is the animation when the item is switched. There are several alternative way that I could think of that but I don’t know how to achieve that
- Triggering animation layout when the item position in the list has changed (listening to replaceAt)
- Triggering remove and add event for replaceAt method in the list
- Adding a method to add an item in the list for specific index (such as splice) (so I could use removeAt and addAt instead of replace)
- Add an animation trigger detecting when the property in an item has changed
Here is the code I’m working with. Currently I use the replaceAll method items.replaceAll(items.toArray()); to re arrange the list within the layout, but the layout animation won’t work as expected and add / remove animation would make the animation looks wierd.
Any suggestion are welcome 
Thanks
<App Theme="Basic">
<Panel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var col = Observable(3);
var items = Observable();
for(var i = 0;i<10;i++){
var o = new Item(i);
items.add(setup(o,i));
}
function Item(id){
var d = (10000000 + id * 100000);
this.color = '#' + d.toString(16);
this.id = id;
}
function setup(item,n){
item.pos = Observable(n);
item.right = Observable(function(){
if((item.pos.value + 1)%col.value===0||(item.pos.value + 1)>=items.length)return false
else return true;
})
item.left = Observable(function(){
if((item.pos.value + 1 )%col.value===1)return false
else return true;
})
item.top = Observable(function(){
if((item.pos.value +1) - col.value <= 0)return false
else return true;
})
item.bottom = Observable(function(){
if((item.pos.value +1) + col.value > items.length)return false
else return true;
})
return item;
}
function switchPos(currentPos,targetPos){
var targetItem = items.getAt(targetPos);
var currentItem = items.getAt(currentPos);
targetItem.pos.value = currentPos;
currentItem.pos.value = targetPos;
items.replaceAt(targetPos, currentItem);
items.replaceAt(currentPos , targetItem);
items.replaceAll(items.toArray());
return currentItem;
}
function addItem(arg){
var len = items.length;
var newItem = new Item(len);
items.add(setup(newItem,len));
}
function swipeRight(arg){
var n = items.indexOf(arg.data);
var r = switchPos(n, n + 1);
}
function swipeLeft(arg){
var n = items.indexOf(arg.data);
switchPos(n, n - 1);
}
function swipeDown(arg){
var n = items.indexOf(arg.data);
switchPos(n, n + col.value);
}
function swipeUp(arg){
var n = items.indexOf(arg.data);
switchPos(n, n - col.value);
}
module.exports = {
items: items,
col : col,
addItem : addItem,
swipeRight : swipeRight,
swipeLeft : swipeLeft,
swipeUp : swipeUp,
swipeDown : swipeDown
};
</JavaScript>
<Panel Alignment="Top">
<ColumnLayout ColumnCount="{col}" />
<Each Items="{items}">
<Panel ux:Name="panelBox">
<DoubleClicked Handler="{addItem}"/>
<LayoutAnimation>
<Move RelativeTo="PositionChange" X="1" Y="1" Duration="0.5" Easing="Linear" />
</LayoutAnimation>
<Viewbox>
<Rectangle ux:Name="box" Margin="3" Fill="{color}" Width="200" Height="200">
<Circle ux:Name="circ" Width="50" Height="50" Fill="#fff" Opacity="0.5">
<Text Value="{id}" Alignment="Center" FontSize="24" />
</Circle>
</Rectangle>
</Viewbox>
<WhileTrue Value="{left}">
<SwipeGesture ux:Name="swipeL" Direction="Left" Length="100" Type="Active"/>
</WhileTrue>
<WhileTrue Value="{right}">
<SwipeGesture ux:Name="swipeR" Direction="Right" Length="100" Type="Active"/>
</WhileTrue>
<WhileTrue Value="{top}">
<SwipeGesture ux:Name="swipeU" Direction="Up" Length="100" Type="Active"/>
</WhileTrue>
<WhileTrue Value="{bottom}">
<SwipeGesture ux:Name="swipeD" Direction="Down" Length="100" Type="Active"/>
</WhileTrue>
<SwipingAnimation Source="swipeR">
<BringToFront/>
<Move X="1" RelativeTo="Size" RelativeNode="panelBox" />
</SwipingAnimation>
<SwipingAnimation Source="swipeL">
<BringToFront/>
<Move X="-1" RelativeTo="Size" RelativeNode="panelBox" />
</SwipingAnimation>
<SwipingAnimation Source="swipeU">
<BringToFront/>
<Move Y="-1" RelativeTo="Size" RelativeNode="panelBox" />
</SwipingAnimation>
<SwipingAnimation Source="swipeD">
<BringToFront/>
<Move Y="1" RelativeTo="Size" RelativeNode="panelBox" />
</SwipingAnimation>
<Swiped Source="swipeR">
<Callback Handler="{swipeRight}"/>
</Swiped>
<Swiped Source="swipeL">
<Callback Handler="{swipeLeft}"/>
</Swiped>
<Swiped Source="swipeU">
<Callback Handler="{swipeUp}"/>
</Swiped>
<Swiped Source="swipeD">
<Callback Handler="{swipeDown}"/>
</Swiped>
</Panel>
</Each>
</Panel>
</Panel>
</App>