Avalonjs achieves image sorting like Weibo dragging _ javascript skills

All Weibo users have uploaded images. After uploading images, users can drag images and adjust the order of images. How can this function be implemented, the following small series will explain how to sort the image of imitation Weibo Based on avalonjs through this article. If you need it, you can drag the image of the imitation Weibo image as needed and adjust the order of the image, the explanation is very detailed, and there are still some shortcomings in the article. You are welcome to criticize and correct it. Let's take a look at the specific content.

Click here to download the source code

What is the sort of dragged images?

Like Weibo, users can drag images to adjust the order of several images after uploading.

We can see that Weibo has fixed the size of each image here. If it is a little more rigorous, it needs to be like the previous article, outside is a response-type high-width several p containers, it is a proportional scaling response image.

The following describes the requirements.

1. Of course, you can drag the image first.

2. Remove the image from its original position. before dragging it to the target position, you must set a placeholder for the target position so that you can preview the effect after dragging.

3. responsive. After the size is changed, the above requirements can still be fulfilled.

4. Try to be compatible with more browsers. In fact, writing the previous article paves the way for this article, so it is also compatible with ie7.

Final Effect

Chrome

Ie8

Ie7

First, drag.

The proxy is used here, that is, p is added in the original layout, and the actual dragged object is this p. Specific,

Bind mousedown to each cell. When start_drag is triggered, place the img in the cell to the proxy.

In the dialog box, get the image size, write down the position of the current mouse click, and use the position as the center point of the proxy p rectangle (image) to show the proxy and hide the clicked image.

 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(); }

Notes:

1. drag_sort.cell_size records the size of the current cell. The Aspect Ratio here is. Because the layout is responsive, You need to record it. You can see how to use this.

2. Check whether the img tag is triggered for the target of the event, because the click position may be a blank area between the cell and the image.

3. ori_src is used to save the image of the current cell, because the cell at the original position of the image will be deleted during mousemove.

4.drag_sort.tar get_index record the index of the current cell. The index and the index of the cell to which the proxy moves will be compared later.

5. drag_flag indicates whether mousemove is allowed.

6. For ie, target. setCapture (); is required. Otherwise

You can see that the default behavior of the browser will be executed when dragging.

7. event. preventDefault (); must also be added; otherwise, the browser's default behavior will also appear. For example, when dragging an image in firefox, a new tab will be opened to display the image.

Then there is mousemove, which is bound to the ul tag. For example, a mousemove event is usually bound to a number of common parent elements that need to be triggered, which reduces the number of objects bound to the event.

Specific

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(); }

Notes

1. drag_flag ensure that the mousedown operation must be triggered before the mousemove operation can be triggered.

2. drag_sort.container is the root element of the entire layout. Here is

.

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

The left and top of the root element should be removed during subsequent computation.

3. During calculation, the vertical scroll bar of aveon (window). scrollTop () browser should also be considered.

4. The size of each cell is always the same, so you can directly move the cursor to the position divided by the number of rows, number of columns, and integer to get the index of the target cell.

5. move_to! Export drag_sort.tar get_index the current cursor moves to a cell that is not the original cell of the image. Delete the cell at the original position of the image and insert the placeholder cell into the target cell. At this time, the dragged image has not been placed into the target cell, finally, update the index of the initial cell.

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'); }

Judge ori_src & target_index! =-1 aims to exclude the invalid operation of mouseup on a non-bound object. Because it is bound to mouseup on the document, it is necessary to exclude the situation similar to clicking in the blank space. You cannot delete or insert cells.

Then, the variable is set as the initial value.

Image effects:

HTML code:

JS Code:

Var drag_holder = null, index =-1, ori_src = null, drag_flag = false; // drag the proxy, original image, original image srcvar post_img = aveon. define ('Post _ img ', function (vm) {vm. post_img_list = []; // Save the srcvm of all images. onmousedown = function (e, I, el) {$ ('drag _ proxy '). style. display = 'block'; var targetpolice.tar get. 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 = 'Lil') {ori_src = el; index = target. getAttribute ('id '). substring (13); $ ('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 you click the image var xx = e. clientX; var yy = e. clientY; $ ('drag _ proxy '). style. top = yy + 'px '; $ ('drag _ proxy '). style. left = xx + 'px '; var x = xx-aveon ($ ('Post _ img ')). offset (). left; var y = yy-aveon ($ ('Post _ Img ')). offset (). top; // in this example, var x_index = Math is not taken into account for the scroll bar. floor (x/100); // The image size is 100 * 100var y_index = Math. floor (y/100); post_img.post_img_list.splice (index, 1); // Delete the livar target_index = 3 * y_index + x_index of the current image; // the position of the target image (3*3) if (post_img.post_img_list.indexOf ('about: blank ')! = Target_index) // If the Image array does not contain src = about: blank, the position of the lipost_img.post_img_list.splice (target_index, 0, 'about: blank '); // Add src = about: blankindex = target_index; // it will trigger multiple moves, so it will be changed once it is triggered. };}); document. onmouseup = function (e) {drag_holder = null; if (ori_src) {post_img.post_img_list.splice (index, 1); // Delete src = about: trim (index, 0, ori_src ); // Add the original image} $ ('drag _ proxy '). style. display = 'none'; $ ('drag _ proxy '). innerHTML = ''; drag_flag = false ;};

The above Code provides the aveon js image sorting Function Based on Weibo-like image dragging. Please forgive me for not writing this article well.