<div id=\'post_img\' ms-controller=\'post_img\'>
   <ul id=\'post_img_inner\' ms-mousemove=\'onmousemove\'>
    <li ms-repeat-el=\"post_img_list\" class=\'inline-block\' ms-mousedown=\'onmousedown($event,$index,el)\' ms-attr-id=\'post_img_item{{$index}}\'>
      <img ms-src=\'el\' class=\'uploaded_img\'></li>
  </ul>
</div>

var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖动的代理，原图片，原图片的src
var post_img = avalon.define(\'post_img\', function(vm) {
  vm.post_img_list=[];//保存所有图片的src
  vm.onmousedown=function(e,i,el){
    $(\'drag_proxy\').style.display=\'block\';
    var target=e.target.parentNode;
    var xx = e.clientX; 
    var yy = e.clientY;
    $(\'drag_proxy\').style.top=yy+\'px\';
    $(\'drag_proxy\').style.left=xx+\'px\';
    if(target&&target.nodeName==\'LI\'){
      ori_src=el;
      index=target.getAttribute(\'id\').substring(13);
      $(\'drag_proxy\').innerHTML=target.innerHTML;
      post_img.post_img_list.splice(i, 1, \'about:blank\');
    }
    drag_flag=true;
  }; 
  vm.onmousemove=function(e){
    if(drag_flag){//如果点下了图片
      var xx = e.clientX; 
      var yy = e.clientY; 
      $(\'drag_proxy\').style.top=yy+\'px\';
      $(\'drag_proxy\').style.left=xx+\'px\';
      var x=xx-avalon($(\'post_img\')).offset().left;
      var y=yy-avalon($(\'post_img\')).offset().top;
      //例子没有考虑滚动条的情况
      var x_index=Math.floor(x/100);//图片尺寸100*100
      var y_index=Math.floor(y/100);
      post_img.post_img_list.splice(index, 1);//删除当前图片的li
      var target_index=3*y_index+x_index;//目标图片的位置（3*3）
      if(post_img.post_img_list.indexOf(\'about:blank\')!=target_index)
      //如果图片数组中没有src=about:blank这个占位置的li
        post_img.post_img_list.splice(target_index, 0, \'about:blank\');
        //添加src=about:blank
      index=target_index;
      //会触发很多次move,所以触发一次就改动一次
    }
  };
});
document.onmouseup=function(e){
  drag_holder=null;
  if(ori_src){
    post_img.post_img_list.splice(index, 1);
    //删除src=about:blank
    post_img.post_img_list.splice(index, 0,ori_src);
    //添加原图片
  }
  $(\'drag_proxy\').style.display=\'none\';
  $(\'drag_proxy\').innerHTML=\'\';
  drag_flag=false;
};