Avalonjs implements image drag effects like Weibo,

Avalonjs implements image drag effects like Weibo,

Effect:

HTML:

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

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 src vm for 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. n OdeName = '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*100 var y_index = Math. floor (y/100); post_img.post_img_list.splice (index, 1); // Delete the li var 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 li post_img.post_img_list.splice (target_index, 0, 'about: blank '); // Add src = about: blank index = 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) {trim (index, 1); // Delete src = about: blank post_img.post_img_list.splice (index, 0, ori_src ); // Add the original image} $ ('drag _ proxy '). style. display = 'none'; $ ('drag _ proxy '). innerHTML = ''; drag_flag = false ;};

The above is all the content of this article. I hope you will like it.