<li ms-repeat='photo_list' ms-attr-id='wrap_photo{{$index}}' ms-class-prev='$index==target_index-1&&x_index>0' ms-class-next='$index==target_index&&x_index<col_num'> ... </li>
mouseup
function onMouseUp(target){ if(photo_sort.drag_flag){ for(var i=0,len=photo_sort.selected_index.size();i<len;i++){//遍历选中图片 var item_index=photo_sort.selected_index[i],data=photo_sort.photo_list, target_index=photo_sort.target_index,temp; if(item_index<target_index){//目标位置在选中图片之后 temp=data[item_index].src; for(var j=item_index;j<target_index;j++) data[j].src=data[j+1].src; data[target_index-1].src=temp; }else{//目标位置在选中图片之前 temp=data[item_index].src; for(var j=item_index;j>target_index;j--) data[j].src=data[j-1].src; data[target_index].src=temp; } } photo_sort.target_index=-1;//各种重置，初始化 photo_sort.sort_array=[]; photo_sort.col_num=0; photo_sort.x_index=-1; photo_sort.selected_index=[]; $('drag_proxy').style.display='none'; photo_sort.drag_flag=false; avalon.unbind(document,'mouseup'); if(isIE) target.releaseCapture(); } }
这里主要就是对图片列表的重排。
- 目标位置在选中图片之前
先把原始图片保存在`temp`,然后把从目标位置图片到原始图片前一位置的图片，依次后移一个位置，最后把`temp`放到目标位置。
- 目标位置在选中图片之后
和上面差不多，只不过这里是把从目标位置图片到原始图片后一位置的图片，依次前移一个位置。
注意
不能像`data[j]=data[j+1]`这样赋值，因为avalon不支持单个转换，如果想更新，需要将整个子VM重新赋以一个新的对象。也就是定义一个arr,然后从头开始向里面添加model,最后`photo_sort.photo_list.clear()`删除所有图片，`photo_sort.photo_list=arr`重新赋值，更新视图。
后记
事实上，google plus在细节上还做了
- 框选图片
- 如果有滚动条，且拖动位置快要超出当前界面，滚动条会自动上移或下移。
这两个本屌就不做了，原理也是很简单的。
您可能感兴趣的文章: