Avalonjs to realize the image drag effect of imitation micro bo

Source: Internet
Author: User

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.