Avalonjs realize the image drag effect _javascript technique of imitation micro bo

Effect:

Html:

<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} ' >
      </li>
  </ul >
</div>

Js:

The Var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//drag agent, the original picture, the original picture of src var post_img = avalon.define (' Post_ IMG ', function (VM) {vm.post_img_list=[];//saves all pictures of Src vm.onmousedown=function (e,i,el) {$ (' drag_proxy '). STYLE.DISPL
    ay= ' 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) {//If the dot below the picture 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; Example does not consider the condition of the scroll bar varX_index=math.floor (x/100);//Picture size 100*100 var y_index=math.floor (y/100); Post_img.post_img_list.splice (index, 1);//delete the position of the current picture's Li var target_index=3*y_index+x_index;//target picture (3*3) if (post_ Img.post_img_list.indexOf (' About:blank ')!=target_index)//If there is no src=about:blank this position in the image array of Li Post_img.post_img
        _list.splice (target_index, 0, ' About:blank ');
      Add Src=about:blank index=target_index;
It triggers a lot of move, so the trigger is changed once at a time};
});
  Document.onmouseup=function (e) {drag_holder=null;
    if (ORI_SRC) {post_img.post_img_list.splice (index, 1);
    Delete Src=about:blank post_img.post_img_list.splice (index, 0,ORI_SRC);
  Add original picture} $ (' Drag_proxy '). style.display= ' None ';
  $ (' Drag_proxy '). Innerhtml= ';
Drag_flag=false; };

The above is the entire contents of this article, I hope you can enjoy.