Avalon JS drag on imitation Weibo

var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//Drag the agent, the original picture, the original picture of the srcvar post_img =  avalon.define (' post_img ',  function (VM)  {vm.post_img_list=[];//Save all images srcvm.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, $ (' 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 picture is under a point 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 situation of the scroll bar var  x_index=Math.floor (x/100);//Picture size 100*100var y_index=math.floor (y/100);p Ost_img.post_img_list.splice (index, 1) ///Delete the position of the livar target_index=3*y_index+x_index;//target picture of the current picture (3*3) if (Post_img.post_img_list.indexOf (' about: Blank ')!=target_index//If there is no src=about:blank in the image array Lipost_img.post_img_list.splice (target_index, 0,   ' About:blank ');//Add src=about:blankindex=target_index;//will trigger a lot of moves, so the trigger is changed one time}}); Document.onmouseup=function (e) {drag_holder=null;if (ORI_SRC) {post_img.post_img_list.splice (index, 1);// Delete Src=about:blankpost_img.post_img_list.splice (INDEX, 0,ORI_SRC);//Add original picture}$ (' Drag_proxy '). style.display= ' None '; $ (' Drag_proxy '). innerhtml= ';d rag_flag=false;};

<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>

Final effect:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/4C/75/wKiom1Q94baROcZIAAP8r-3mvIs027.gif "title=" video 1_ turn. gif "alt=" Wkiom1q94barocziaap8r-3mvis027.gif "/>

Masaki Https://github.com/RubyLouvre/avalon Avalon MVVC is really powerful, 50 line JS will take care of this

This article from "CONDOM11" blog, declined reprint!

Avalon JS drag on imitation Weibo