Avalonjs implements Multi-drag sorting of images like googleplus with source code download _ javascript skills

This article mainly introduces the avalonjs Implementation of imitation googleplus picture multiple drag sort attachment source code download related information, need friends can refer to the source code download: http://xiazai.jb51.net/201509/yuanma/drag_sort1 (jb51.net%.rar

The results are as follows:

Google plus

Drag + response effects:

Requirements

1. alignment layout on both sides, that is, the spacing between images is the same, but the distance between the images and the border on both sides is not necessarily equal to the distance between images, compatible with ie7, 8, firefox, chrome.
2. when the browser size is larger than a certain size, each line will automatically increase or decrease the image size and adjust the spacing between the images to ensure the alignment of the two sides, at this time, the size of each image is fixed (200 * PX here). When the size is smaller than a certain size, the number of images in each line is fixed (the minimum number of columns here is 3). At this time, the image is always scaled proportionally.
3. the browser can still be dragged and sorted in different sizes.
4. Image, drag the image in the proxy to maintain a proportional and vertical center.
5. When you drag the image to the corresponding position, a certain offset occurs between the left and right of the image. If it is on the leftmost or rightmost side, only the first or last image of the row is offset.
6. Multiple images can be dragged and sorted.

Implementation

Layout and css

 
  
 
 
   
  
  
 
 
 
 
 
 
   
  
  
  
 
 
 
inline-block+flex-box+text-align:justify

This is compatible with earlier browsers, so the list li layout uses inline-block, while the alignment layout on both sides

-Earlier versions: inline-block + 'text-align: justify'

-Modern: inline-block + 'flex-box'

For details, refer to the space-between simulation of flexbox justify-content.

In flex-box, 'align-content: space-found 'is not used because it cannot be compatible with earlier browsers through 'text-align: justify.

'Text-align: justify 'cannot make the leftmost text. the rightmost text is automatically adjusted to the gap between the box edge and the rightmost text. Even if padidng is added to the outer box, for example:

li{ margin:0 1%; ...}#wrap{ padding:0 1%;}

It looks like it is the leftmost, and the spacing between the rightmost and box boundary is the same as that between li, both of which are 2%. In fact, the padding set in the outer box will never change, and the margin between li is the minimum spacing between them. If the spacing between all the li segments is 1%, then there will still be extra white spaces on the line. These li segments will divide the white spaces equally, and the spacing between them will be greater than 1%.
Implementation

li{ list-style-type: none; display:inline-block; *display: inline; zoom:1; max-width: 200px; max-height: 200px; width: 28%; border:1px solid red; position: relative; overflow: hidden; margin:10px 2%;}li[class='justify_fix']{ border:none;}.justify { display: flex; align-items: flex-start; flex-flow: row wrap; justify-content: space-between; text-align: justify; text-justify: inter-ideograph; *zoom: 1;  -moz-text-align-last: justify; -webkit-text-align-last: justify; text-align-last: justify;}@media (-webkit-min-device-pixel-ratio:0) { .justify:after {  content: "";  display: inline-block;  width: 100%; }}

Here we need to add 'max-width' and 'max-height'. We can see that the cells are all percentages, and we need to limit the maximum size outside.

Image response + horizontal vertical center

For details, see the css image response + vertical horizontal center.

Selected Image

Google plus: press ctrl and click the image to select multiple images. Click "box" (''here '').
Click it and pass the index of the current image to the array (selected_index) that saves the index of the selected image ). If the index does not exist, add it. If the index already exists, delete it. The "box" adjusts the style based on whether the index exists in the array.

  
 
 
   
  
  
-1 'Ms-click = 'select ($ index) '>...
   
  
  
  
 
 
 
Var photo_sort = aveon. define ({selected_index: [], // The index list of the selected image ,... select: function (I) {var selected_index = photo_sort.selected_index; if (selected_index.indexOf (I) =-1) // The index list of the selected image does not exist. Add photo_sort.selected_index.ensure (I ); else photo_sort.selected_index.remove (I );}});

Mousedown

The mask layer is used and the mousedown event is bound to it.

-1 'Ms-click = 'select ($ index) '>
Var photo_sort = aveon. define ({$ id: 'photo _ sort ', photo_list: [], // image list selected_index: [], // drag_flag: false, sort_array: [], // range list, cell_size: 0, // size of each cell. Here the aspect ratio is 1 target_index:-1, // index col_num: 0 at the final target location, // Number of columns x_index:-1, // The x direction index of the current drag position ...}); start_drag: function (e, index) {if (photo_sort.selected_index.size () {// you can select the image photo_sort.target_index = index. // you do not need to drag the image but click the image, set the default target to photo_sort.cell_size = this. clientWidth; var xx = e. clientX-photo_sort.cell_size/2, yy = e. clientY-photo_sort.cell_size/2; // click the slice, set the proxy position to the center of the click point $ ('drag _ proxy '). style. top = yy + aveon (window ). scrollTop () + 'px '; $ ('drag _ proxy '). style. left = xx + 'px '; $ ('drag _ proxy '). style. width = photo_sort.cell_size + 'px '; $ ('drag _ proxy '). style. height = photo_sort.cell_size + 'px '; drag_proxy.select_num = percent; // set the number of images selected in the proxy if (percent> 0) {var drag_img = photo_sort.photo_list [photo_sort.selected_index [drag_proxy.select_num-1]; drag_proxy.src = drag_img.src; // set the last "album" photo_sort.drag_flag = true; $ ('drag _ proxy') as the proxy object in the selected image '). style. display = 'block';} // cell_gap: Specifies the spacing between images. first_gap: Specifies the gap between the first image and the external p. var wrap_width = aveon ($ ('Wrap ')). width (), wrap_offset = $ ('wrapp '). offsetLeft, first_left = $ ('Wrap _ photo0 '). offsetLeft, second_left = $ ('Wrap _ photo1 '). offsetLeft, first_gap = first_left-wrap_offset, cell_gap = second_left-first_left; photo_sort.col_num = Math. round (wrap_width-2 * first_gap + (cell_gap-photo_sort.cell_size)/cell_gap); for (var I = 0; I
 
  

  
Click the mouse to see the mask of the selected image. Add '. photo_mask' to it'
  

  

  

  
Mousemove
  

  
Drag_move: function (e) {if (photo_sort.drag_flag) {var xx = e. clientX, yy = e. clientY, offset = aveon ($ ('wrapp ')). offset (); var offsetX = xx-offset.left, offsetY = yy-offset.top; photo_sort.sort_array.push (offsetX); // list the ranges added to the current mouse position photo_sort.sort_array.sort (function (a, B) {// return parseInt (a)-parseInt (B) for sorting the range list; // convert it to The value type; otherwise, '20140901' <'20160901'} is displayed '}); // locate the index of the current mouse position from the sorted range list, that is, index var x_index = photo_sort.sort_array.indexOf (offsetX), y_index = Math. floor (offsetY/(photo_sort.cell_size + 20), size = photo_sort.photo_list.size (); photo_sort.x_index = x_index; photo_sort.target_index = photo_sort.col_num * y_index + x_index; // index if(photo_sort.tar get_index> size) of the target in all images // the target location is out of the boundary photo_sort.target_index = size; photo_sort.sort_array.remove (offsetX ); // remove the current position $ ('drag _ proxy '). style. top = aveon (window ). scrollTop () + yy-photo_sort.cell_size/2 + 'px '; $ ('drag _ proxy '). style. left = xx-photo_sort.cell_size/2 + 'px ';} e. stopPropagation ();}
  

  
Notes
-Determination of the current position to be dragged
  
 
  
The vertical lines of each cell in the figure divide the cells into two sides in the horizontal direction. Each vertical line divides a row into five parts. When judging, You can see which part of the current part of 'E. clientx' is in the five parts.
  
-Sorting is used in the judgment. Specifically, save the x coordinates of each vertical line and the x coordinates of the current mouse position to the array (here 'sort _ array'), sort the order, then 'indexof 'looks at the x coordinate of the current mouse position in the array to get the target position of the current drag.
  
If no sorting is required, the code will look like this
  

  
Var target; if (x> 50 + 50) {if (x> 3*100 + 3*100 + 50 + 50) {// the last part of target = 4 ;} else {target = (x-50-50)/(50 + 100 + 50) ;}} else target = 0;
  

  
-Delete the x coordinates of the current mouse position and leave the blank position to the x coordinates of the next mousemove event.
-A certain offset occurs between the image at the left and right of the target to be dragged. This is nothing more than adding the corresponding class to the image at the left and right of the target.
  

  
.prev{ right: 40px;}.next{ left: 40px;} 
  
   
  
   
    
   
 ... 
   
    
   
  
   
  
 

  

  
It should be noted that when the contemporary principle is dragged to the leftmost or rightmost, because the layout is 'inline-Block', the last row of the row where the target position is located (if any) the last cell or the first cell in the next row (if any) also has an offset.
  
 
  
The solution is to set the variable 'x _ Index' to indicate the index of the cell in the x direction. When adding the offset class, add the judgment condition.
  

  
...
  

  
Mouseup
  

  
Function onMouseUp (target) {if (photo_sort.drag_flag) {for (var I = 0, len = photo_sort.selected_index.size (); I
   
    
Target_index; j --) data [j]. src = data [J-1]. src; data [target_index]. src = temp ;}} photo_sort.target_index =-1; // various resets. initialize photo_sort.sort_array = []; photo_sort.col_num = 0; photo_sort.x_index =-1; photo_sort.selected_index = []; $ ('drag _ proxy '). style. display = 'none'; photo_sort.drag_flag = false; aveon. unbind (document, 'mouseup'); if (isIE) target. releaseCapture ();}}
   
  

  
Here, we will rearrange the image list.
-The target position is before the selected image.
  
 
  
First, save the original image in 'temp '. Then, move the image from the target position to the previous position of the original image, move the image one by one, and then put 'temp' to the target position.
-The target location is after the selected image.
  
 
  
It is similar to the above, but here we move the image from the target position to the next position of the original image one by one.
  
Note:
  
You cannot assign values like 'data [j] = data [j + 1] ', because aveon does not support a single conversion. If you want to update a value, the entire sub-VM needs to be assigned a new object. That is to say, define an arr, add a model to it from the beginning, and finally 'photo _ sort. photo_list.clear () 'deletes all images, 'photo _ sort. photo_list = arr': assign a value again to update the view.
  
Postscript
  
As a matter of fact, google plus has also made some details
-Select an image
-If a scroll bar exists and the drag position is about to exceed the current page, the scroll bar will automatically move up or down.
These two books won't be done, and the principle is also very simple.