JavaScript achieves Image drag effects like Weibo. it seems that many of my friends need this function these days. today, I found this function is well made by js and cannot be exclusive. I hope my friends will like it. Effect:
HTML:
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.