Simple jquery drag and drop sorting effect implementation code_jquery

Steps: 1. Realize the effect of moving with the mouse; 2. Initialize an element and its coordinates; 3. Drag the last coordinates of the object, and calculate and judge with the coordinates of the element to determine what to insert The target element; 4. Use insertBefore method to insert in front of the target element The specific code is as follows:

Copy code The code is as follows: Tested drag function body , div { margin: 0; paading: 0; font-size: 12px; } body { width: 960px; 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; } .box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; } .main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background : #ccc; } .maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; } .hide { width: 600px; height: 80px; margin-bottom: 5px; } .dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; } ; $(document).ready( function () { 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 } ; //Initialize the coordinates of the target element object var theDiv = null, move = false; //Drag object drag state var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; / /Initialization of the index and height of the drag object. var tarDiv = null, tarFirst, tempDiv; //Object of the target element to be inserted, temporary dotted line object $(".main").each(function(){ $(this) .mousedown(function (event){ //Drag object theDiv = $(this); //Relative offset of mouse element 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","maindash"); // Create a new element and insert it at the position before the dragged element (dashed line box) $(" ").insertBefore(theDiv); }); }); $(document).mousemove(function (event) { 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 and move the mouse to find and insert the target element var $main = $('.main'); // Local variables: Get the coordinates of each element again in the rearranged order, tempDiv = $ (".dash"); //Get the object of the temporary dashed box $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 center ordinate of the first element object //Drag the object to the first position if (lastPos .y tempDiv.insertBefore(tarFirst); } //After judging the coordinates of the target element to be inserted, directly insert if (lastPos.y >= tarPos .y - theDivHalf && lastPos.y1 >= tarPos.y1 ) { tempDiv.insertAfter(tarDiv); } }); }).mouseup(function(event) { theDiv.insertBefore(tempDiv); // Drag and drop the element to insert it at the position of the dotted div theDiv.attr("class", "main"); //Restore the initial style of the object tempDiv.remove (); // Delete the newly created dotted div move=false; }); }); div1 div2 div3 div4 div5

Simple jquery drag and drop sorting effect implementation code_jquery

Related articles