Avalon JS to realize the sorting _javascript of the image-imitating micro-blog dragging

The following for imitation micro-blog Pictures drag, adjust the order of the picture, explained in detail, the article is certainly still lack of place, welcome to criticize correction. Don't say much nonsense, look at the specific content.

Click here to enter the source download

What is a drag picture sort?

Like Weibo, uploading allows the user to adjust the order of several pictures by dragging the picture.

You can see the micro-blog here to each picture fixed size, a little more rigorous, it needs to be like the previous article, the outside is responsive to the high width of a number of Div containers, which is proportional to scale the response of the picture.

The next request.

1. Of course, first picture to be able to drag.

2. The picture moved out of its original position, dragged to the target position and did not release the mouse before dragging, you need to set the placeholder in the target location, so that the user preview the effect of drag completion.

3. Response type. After the size change, the above requirements can still be completed.

4. Compatible with as many browsers as possible. In fact, write an article is to pave the way for this article, so this is also compatible to IE7.

Final effect

Chrome

Ie8

Ie7

First, drag.

Here with the agent, that is, in the original layout of a Div, the actual drag object is this div. concrete,

<div id= ' wrap ' ms-controller= ' drag_sort ' class= ' Ms-controller ' > <ul ms-mousemove= ' drag_move
 ($event) ' >
 <li ms-repeat= ' photo_list ' >
 <div ms-mousedown= ' Start_drag ($event, $index, el) ' >
  < Div class= "dummy" ></div>
  <p ms-attr-id= ' wrap_img{{$index}} ' > <i></i></p>
 </div>
 </li>
 </ul>
 <div id= ' Drag_proxy ' > </div>
 </div>

For each cell bound MouseDown, trigger Start_drag, the cell in the IMG into the proxy <div id= ' Drag_proxy ' ></div> inside, while getting the size of the picture, note the current mouse click position, and click on the location for the agent Div rectangle (picture) center point, display agent, hidden click of the picture.

 Start_drag:function (E,i,el) {var img=$ (' wrap_img ' +i). Firstchild,target_img_width=img.clientwidth,target_img_
 Height=img.clientheight;
 drag_sort.cell_size=$ (' wrap_img0 '). clientwidth; var Xx=e.clientx-target_img_width/2,yy=e.clienty-target_img_height/2,offset=avalon ($ (drag_sort.container)). 
 Offset (), Target=e.target.parentnode.parentnode.parentnode;
 $ (' Drag_proxy '). Style.top=yy+avalon (window). scrolltop ()-offset.top+ ' px ';
 $ (' Drag_proxy '). style.left=xx-offset.left+ ' px ';
 $ (' Drag_proxy '). style.width=target_img_width+ ' px ';
 $ (' Drag_proxy '). style.height=target_img_height+ ' px ';
  if (target&&target.nodename== ' LI ') {ori_src=el;
  $ (' Drag_proxy '). Innerhtml=target.queryselector (' P '). InnerHTML;
  $ (' Drag_proxy '). innerhtml=$ (' wrap_img ' +i). InnerHTML;
  $ (' Drag_proxy '). style.display= ' block ';
  Drag_sort.target_index=i;
 Drag_flag=true;
 } if (Isie) target.setcapture ();
 Avalon.bind (document, ' MouseUp ', function () {up (target);
 });
 E.stoppropagation ();
 E.preventdefault ();
 }

Note Some points:

1.drag_sort.cell_size records the size of the current cell, where the aspect ratio is 1:1, because the layout is responsive, so you need to record it. You can see how to use this later.

2. The target of the event needs to be judged whether the IMG tag is triggered because it is possible to click on a space between the cell and the picture.

3.ORI_SRC is used to save the picture of the current cell, because the cell in the original position of the picture is deleted when the MouseMove is behind.

4.drag_sort.target_index records the index of the current cell, followed by the index of this index and the cell to which the agent moved.

5.drag_flag said whether it could be mousemove.

6. For IE, must target.setcapture ();

You can see that the default behavior of the browser is performed when you drag.

7.event.preventdefault () must also be added, otherwise there will be browser default behavior, such as Firefox drag the picture, will open a new tab, display pictures.

Then there is the MouseMove, which is bound on the UL tag. Like Mousemove,mouseup events are usually bound to a number of common parent elements that need to be triggered, thus reducing the event-bound object.

Specific to

Drag_move:function (e) {
 if (drag_flag) {
  var Xx=e.clientx,yy=e.clienty,offset=avalon ($ drag_sort.container ). offset ();
  var x=xx-offset.left,y=avalon (window). scrolltop () +yy-offset.top;
  var X_index=math.floor (x/drag_sort.cell_size), Y_index=math.floor (y/drag_sort.cell_size), move_to=3*y_index+x_ index;
  $ (' Drag_proxy '). style.top=y-drag_sort.cell_size/2+ ' px ';
  $ (' Drag_proxy '). style.left=x-drag_sort.cell_size/2+ ' px ';
  if (move_to!=drag_sort.target_index) {
  drag_sort.photo_list.removeAt (drag_sort.target_index);
  Drag_sort.photo_list.splice (move_to,0,{src: ' 1.jpg '});
  Drag_sort.target_index=move_to
  }
 }
 E.stoppropagation ();
 }

A few notes

1.drag_flag guarantees that the MouseDown must be triggered before the MouseMove can be triggered.

2.drag_sort.container is the root element of the entire layout, here is the <div id= ' wrap ' ></div>

#wrap {
 position:relative;
 max-width:620px;
 font-size:0;
 }
 #drag_proxy {
 position:absolute;
 border:1px solid #009be3;
 z-index:100;
 Display:none;
 }

The left,top of the root element should be lost when the calculation is followed.

3. Avalon (Window). scrolltop () The vertical scroll bar of the browser should also be considered.

4. The size of each cell is always the same, so the direct cursor is moved to the position divided by the number of rows, the number of columns, rounding, to get the target cell index.

5.move_to!=drag_sort.target_index the current cursor to the cell is not the original cell, delete the original location of the picture cell, the target cell inserted in the placeholder cell, the dragged picture has not been put into the target cell, Finally, the index of the initial cell is updated.

And finally, MouseUp.

function up (target) {
 if (Isie)
 target.releasecapture ();
 var Target_index=drag_sort.target_index;
 if (ori_src&&target_index!=-1) {
 drag_sort.photo_list.splice (target_index,1);
 Drag_sort.photo_list.splice (TARGET_INDEX,0,ORI_SRC);
 }
 Drag_holder=null;
 Drag_flag=false;
 Drag_sort.target_index=-1;
 $ (' Drag_proxy '). style.display= ' None ';
 Avalon.unbind (document, ' MouseUp ');
 }

The purpose of Ori_src&&target_index!=-1 is to exclude MouseUp this invalid operation on unbound objects. Because it is binding on the document MouseUp, it is necessary to exclude similar to casually click in the blank space. You cannot delete the cell, insert it.

The variables are then set to the initial values.

Picture effect:

HTML code:

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

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.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 Li V of the current picturePosition of the AR 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 in the image array this occupies the position 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 code to achieve the Avalon JS imitation micro-bo drag pictures of the function of sorting, this article is not written well forgive me.