drag_move:function(e){ if(photo_sort.drag_flag){ var xx=e.clientX,yy=e.clientY,offset=avalon($('wrap')).offset(); var offsetX=xx-offset.left,offsetY=yy-offset.top; photo_sort.sort_array.push(offsetX);//把当前鼠标位置添加的范围列表 photo_sort.sort_array.sort(function(a,b){//对范围列表排序 return parseInt(a)-parseInt(b);//转为数值类型,否则会出现'1234'<'333' }); //从已排序的范围列表中找出当前鼠标位置的index,即目标位置水平方向的index var x_index=photo_sort.sort_array.indexOf(offsetX),y_index=Math.floor(offsetY/(photo_sort.cell_size+20)), size=photo_sort.photo_list.size(); photo_sort.x_index=x_index; photo_sort.target_index=photo_sort.col_num*y_index+x_index;//目标在所有图片中的index if(photo_sort.target_index>size)//目标位置越界 photo_sort.target_index=size; photo_sort.sort_array.remove(offsetX);//移除当前位置 $('drag_proxy').style.top=avalon(window).scrollTop()+yy-photo_sort.cell_size/2+'px'; $('drag_proxy').style.left=xx-photo_sort.cell_size/2+'px'; } e.stopPropagation(); }
几点说明
- 关于当前拖动到的位置判定
图中每个单元格的竖线，在水平方向把单元格分为两边。每个竖线把一行分为5部分，判断的时候，看鼠标当前的`e.clientX`在5个部分里的哪一部分。
- 这里在判断的时候用了排序。具体的，把每个竖线的x坐标和当前鼠标位置的x坐标保存到数组（这里的`sort_array`）,排好序，然后`indexOf`看当前鼠标位置的x坐标在数组中的位置，即可得到当前拖动的目标位置。
如果不用排序的话，代码会像这样
var target; if(x>50+50){ if(x>3*100+3*100+50+50){//最后一部分 target=4; }else{ target=(x-50-50)/(50+100+50); } }else target=0;
- 后面删除当前鼠标位置的x坐标，空出位置，留给下一次mousemove事件的x坐标。
- 关于当前拖动的目标位置左右的图片发生一定偏移，无非就是对目标位置左右的图片加上相应的class.
.prev{ right: 40px; } .next{ left: 40px; } <div ms-controller='photo_sort'> <ul ms-mousemove='drag_move($event)'> <li ms-repeat='photo_list' ms-attr-id='wrap_photo{{$index}}' ms-class-prev='$index==target_index-1' ms-class-next='$index==target_index'> ... </li> <li></li> </ul> </div>
这里需要注意，当代理拖动到最左边或最右边时，由于布局是`inline-block`,此时目标位置所在行的上一行（如果有）的最后一个单元格或下一行（如果有）的第一个单元格也会发生偏移。
解决方法是设置变量`x_index`,表示单元格在x方向的index.在添加偏移class的时候，增加判定条件