Avalon JS Drag Picture sort

Reprint Please specify: theviper http://www.cnblogs.com/TheViper

What is the drag picture sort?

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

You can see the micro-blog here to each picture fixed size, a little more rigorous point, you need to like the previous article, the outside is a response to the high-width of a number of Div containers, which is proportional scaling of the response to the picture.

Below are the requirements.

1. Of course the first picture should be dragged.

2. Move the picture out of its original position, drag it to the target location and before you release the mouse to complete the drag, you need to set the placeholder at the target location to let the user preview the effect after the drag is complete.

3. Response style. After the size changes, the above requirements can still be completed.

4. Be as compatible as possible with more browsers. In fact, writing an article is to pave the way for this article, so it is also compatible to IE7.

Final effect

Chrome

Ie8

Ie7

First, drag.

The proxy used here, that is, in the original layout of a Div, the actual dragged object is the div. Specifically,

    <DivID= ' Wrap 'Ms-controller= ' Drag_sort 'class= ' Ms-controller '>        <ulMs-mousemove= ' Drag_move ($event) '>            <Lims-repeat= ' photo_list '>                <DivMs-mousedown= ' Start_drag ($event, $index, el) '>                    <Divclass= "Dummy"></Div>                    <PMs-attr-id= ' wrap_img{{$index}} '><imgms-attr-src= "El.src"><I></I></P>                </Div>            </Li>        </ul>        <DivID= ' Drag_proxy '></Div>    </Div>

For each cell binding MouseDown, trigger Start_drag, the cell is placed in the IMG agent <div id= ' Drag_proxy ' ></div> inside, while capturing the size of the image, note the current mouse click position, And to click the position as the proxy div rectangle (picture) of the center point, show the agent, hide the clicked picture.

Start_drag:function(E,i,el) {varimg=$ (' wrap_img ' +i). firstchild,target_img_width=img.clientwidth,target_img_height=Img.clientheight; Drag_sort.cell_size=$ (' wrap_img0 '). clientwidth; varXx=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 the 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 it needs to be recorded. You can see how this is used in the back.

2. The target of the event needs to be judged whether the IMG tag is triggered, because it is possible that the click location is an empty area between the cell and the picture.

3.ORI_SRC is used to save the picture of the current cell, because the cell at the original location of the image is deleted when the MouseMove is back.

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

5.drag_flag Indicates whether it is possible to MouseMove.

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

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

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

Then there is MouseMove, which is bound on the UL label. Events like the Mousemove,mouseup event are usually bound to a number of common parent elements that need to trigger the element, thus reducing the object bound by the event.

Specific to

Drag_move:function(e) {if(drag_flag) {varxx=e.clientx,yy=e.clienty,offset=Avalon ($ (Drag_sort.container)). offset (); varX=xx-offset.left,y=avalon (window). scrolltop () +yy-Offset.top; varX_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

The 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 <div id= ' wrap ' ></div>

    #wrap{        position: relative;         Max-width: 620px;         font-size: 0;    }     #drag_proxy{        position: absolute;         Border:1px solid #009be3;         z-index: +;         display: none;    }

The left,top of the root element is lost when the calculation is in the back.

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

4. The dimensions of each cell are always the same, so the position where the cursor is moved is divided by the number of rows, number of columns, rounding, and index of the target cell.

5.move_to!=drag_sort.target_index the cell to which the current cursor is located is not the original cell of the picture, removes the cell from the original position of the picture, inserts a placeholder cell in the target cell, and the dragged picture is not in the target cell. Finally, the index of the initial cell is updated.

And finally the MouseUp.

        functionUp (target) {if(Isie) target.releasecapture (); vartarget_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 judging ori_src&&target_index!=-1 is to exclude MouseUp this invalid operation on the unbound object. Because it is bound in the document MouseUp, it is necessary to exclude similar to casually click in the blank space. In this case, you cannot delete the cell and insert it.

The variables are then set to their initial values.

Attached download

Avalon JS Drag Picture sort