Avalonjs to realize the image drag effect of imitation micro bo

JavaScript implementation of imitation micro-blog Pictures Drag effects, seemingly these days there are many friends need this function, today found this is a good JS production, do not dare to enjoy, hope that friends like oh.

Effect:

Html:

?

1 2 3 4 5 6

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

> var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//drag agent, original picture, 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.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 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; Examples do not consider the situation of the scroll bar var x_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.