Shulou(Shulou.com)06/01 Report--

This article mainly explains "jQuery how to achieve drag-and-drop sorting effect", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "jQuery how to achieve drag-and-drop sorting effect" bar!

Enhance and dynamically increase Div effect

Originally, there is no new action. After analyzing the code, it is found that it is easy to enhance.

Body, div {margin: 0; paading: 0; font-size: 12px;} body {width:100%; margin: 0 auto;} ul, li {margin: 0; padding: 0; list-style: none;} .clear {clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px;} .drag _ module_box {width: 600px; height: auto; margin: 25px 000; padding: 5px; border: 1px solid # f00 } .drag _ module_box1 {width: 600px; height: auto; margin: 25px 00; padding: 5px; border: 1px solid # f00;} .drag _ module_main {position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: # ccc;} .drag _ module_maindash {position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: # ececec; opacity: } .drag _ module_hide {width: 600px; height: 80px; margin-bottom: 5px;} .drag _ module_dash {position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed # f00;}; $(document). Ready (function () {/ / Source: http://www.cnblogs.com/web-ed2/archive/2011/09/19/2181819.html var range = {x: 0, y: 0} / / Mouse element offset var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; / / four coordinates of the drag object var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; / / the coordinates of the target element object initialize var theDiv = null, move = false;// drag object drag state var theDivId = 0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0 / / initialization of the index, height, and height of the drag object. Var tarDiv = null, tarFirst, tempDiv; / / object of the target element to insert, temporary dotted object function loopbox () {/ / Loop initialization $(".drag _ module_box") .find (".drag _ module_main") .each (function () {console.log ('find'); $(this) .mousedown (function (event) {/ / drag object theDiv = $(this)) / / relative offset of mouse elements range.x = event.pageX-theDiv.offset (). Left; range.y = event.pageY-theDiv.offset (). Top; theDivId = theDiv.index (); theDivHeight = theDiv.height (); theDivHalf = theDivHeight/2; move = true; theDiv.attr ("class", "drag_module_maindash") / / create the position of the new element before inserting the drag element (dotted frame) $("") .insertBefore (theDiv);});} loopbox (); $(".drag _ module_box") .mousemove (function (event) {console.log ('mousemove'); if (! move) return false; lastPos.x = event.pageX-range.x) LastPos.y = event.pageY-range.y; lastPos.y1 = lastPos.y + theDivHeight; / / drag the element to move with the mouse theDiv.css ({left: lastPos.x + 'px',top: lastPos.y +' px'}); / / drag the element to find and insert the target element var $main = $('.drag _ module_main') with the mouse / / Local variables: get the coordinates of each element again in the rearranged order, tempDiv = $(".drag _ module_dash"); / / get the temporary dotted frame object $main.each (function () {tarDiv = $(this); tarPos.x = tarDiv.offset (). Left; tarPos.y = tarDiv.offset (). Top TarPos.y1 = tarPos.y + tarDiv.height () / 2; tarFirst = $main.eq (0); / / get the first element tarFirstY = tarFirst.offset () .top + theDivHalf / / the central ordinate of the first element object / / drag the object to the first location if (lastPos.y = tarPos.y-theDivHalf & & lastPos.y1 > = tarPos.y1) {tempDiv.insertAfter (tarDiv);}}) .mouseup (function (event) {console.log ('mouseup'); if (theDiv==null) return false; theDiv.insertBefore (tempDiv) / / drag the element to insert theDiv.attr ("class", "drag_module_main") on the dotted line div; / / restore the original style of the object $('.drag _ module_dash') .remove (); / / delete the newly created dotted line div move=false;}) ("# drag_module_insert") .click (function () {$("# drag_module_box1") .html ($("# drag_module_box1") .html () + $("# drag_module_box2") .html ()); loopbox ();}) ("# drag_module_seque") .click (function () {$(".drag _ module_box") .find (".drag _ module_main") .each (function () {console.log ($(this) .attr ('id'));});}) Div1 div2 div3 div4 div5 div6 div7 thank you for reading, the above is the content of "how to achieve drag-and-drop sorting effect in jQuery". After the study of this article, I believe you have a deeper understanding of how to achieve drag-and-drop sorting effect in jQuery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.